Question

您好我一直在使用wordpress的“Sliding Read More”插件来扩展首页上的后读取更多文字。这个插件很好用。但我需要它在单击read-more链接时也能水平扩展。目前它只是在div空间上第二次点击时水平扩展。该网站是：www.platformbk.nl - 谢谢！

以下是代码：

var $jslide = jQuery.noConflict();

$jslide(document).ready(function() {

// MY CODE BELOW
var modWidth = 679;
var origWidth = 326;

$('div.box-content').click(function () {
$(this).width(modWidth);
});

// initialise the visibility check
var is_visible = false;

// append show/hide links to the element directly preceding the element with a class of        "toggle"
$jslide('.toggle').prev().append(' <a href="#" class="toggleLink">'+showText+'</a>');

// hide all of the elements with a class of 'toggle'
$jslide('.toggle').hide();

// capture clicks on the toggle links
$jslide('a.toggleLink').click(function() {

// switch visibility
is_visible = !is_visible;


// change the link depending on whether the element is shown or hidden
$jslide(this).html( (!is_visible) ? showText : hideText);

// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$jslide(this).parent().next('.toggle').toggle('slow');

// return false so any link destination is not followed
return false;
});
});

Answer 1

尝试替换此行：

$jslide(this).parent().next('.toggle').toggle('slow');

with：

$jslide(this).parent().parent().animate({width: '679'}, {duration: "slow" });
$jslide(this).parent().next('.toggle').animate({width: '679'}, {duration: "slow" });

然后可能将其封装在一个条件块中，以便在切换时调整回原来的宽度但是你可能会遇到其他问题，例如你的div盒与其他人重叠等等。

希望这有帮助。

用于Wordpress首页的Jquery Read-more滑块

1 个答案: