2

感谢您的帮助..这是我的问题：下面的代码，当单击阅读更多...链接时应该显示链接下的 div，但只有在所有其他可能的 div 被隐藏之后...我需要按原样在回调中使用它，但是当这样使用时，第一个链接正确显示，最后三个显示，然后隐藏，然后显示......帮助！

Javascript：

var more_text="Read More...";
var less_text="Read Less...";

jQuery(document).ready(function() {
    $j(".dropdown").click( function () {
        if ($j(this).html() == more_text){
            var that = $j(this);
            $j(".extra").slideUp( function () {
                $j(".dropdown").html(more_text);
                that.html(less_text);
                that.next(".extra").slideDown();
            });
        }
    });
});

HTML：

<div class="dropdown">Read More...</div>
<div class="extra" style="display: none;">Here is more text!!</div>

<div class="dropdown">Read More...</div>
<div class="extra" style="display: none;">Here is more text!!</div>

<div class="dropdown">Read More...</div>
<div class="extra" style="display: none;">Here is more text!!</div>

<div class="dropdown">Read More...</div>
<div class="extra" style="display: none;">Here is more text!!</div>
4

2 回答 2

1

问题是当你调用$j(".extra").slideUp(...一些带有类的元素时extra已经隐藏了，所以那些会导致回调立即触发，然后当需要关闭的元素完成关闭时，你会再次触发回调。将该行更改为：

$j(".extra").slideUp().promise().done( function () {

我认为它会按照您期望的方式工作。

于 2012-07-26T22:29:00.810 回答
0

您必须过滤要向上滑动的元素。你应该使用这个：

jQuery(document).ready(function() {
    $j = jQuery;
    $j(".dropdown").click( function () {
        if ($j(this).html() == more_text){
            var that = $j(this);
            if ($j(".extra").filter(":visible").length > 0) {
                $j(".extra").filter(":visible").slideUp( function () {
                    $j(".dropdown").html(more_text);
                    that.html(less_text);
                    that.next(".extra").slideDown();
                });
            }
            else {
                $j(".dropdown").html(more_text);
                that.html(less_text);
                that.next(".extra").slideDown();
            }
        }
    });
});

这也有一个条件，它检查任何.extra元素是否可见，如果不可见则不向上滑动任何元素。

http://jsfiddle.net/vExYL/

于 2012-07-26T22:29:32.550 回答