0

这就是我想要它做的...

当单击名为'bd'的div时>检查id为'ump'的div是否有一个'active'类>如果有，获取具有'brandDump'类的div并慢慢向上滑动，隐藏它，然后删除'active' 的类 > 否则，使用 'brandDump' 类的 div 并向下滑动，显示它，然后添加 'active' 类

当我单击 div.bd 时没有任何反应。我究竟做错了什么？

小提琴链接和代码如下。

http://jsfiddle.net/K2V8f/36/ 

<div class="bd">cool</div>
<div class="brandDump" id="ump">works</div>
<div>shape</div>

.brandDump {
background-color:#fff;
width:100px;
display:none;
}

.bd {
width:100px;
height:100px;
background-color:#000;
}

$(".bd").click(function () {
if ("#ump".hasClass("active")) {
    $(".brandDump").slideUp("slow");
    $(".brandDump").hide();
    $(".brandDump").removeClass("active");
} else {
    $(".brandDump").slideDown("slow");
    $(".brandDump").show();
    $(".brandDump").addClass("active");
}
});
4

2 回答 2

2

更新的小提琴

当 slideUp 完成时，您需要使用回调。

$(".bd").click(function () {
    if ($("#ump").hasClass("active")) {
        $(".brandDump").slideUp("slow", function () {
            $(".brandDump").removeClass("active");
        });

    } else {
        $(".brandDump").slideDown("slow", function () {
            $(".brandDump").addClass("active");
        });

    }

});

("#ump") 也有错误...应该是 $("#ump")

于 2013-10-27T02:10:46.843 回答
1

问题是你有：

"#ump".hasClass(...

...当你应该有的时候：

$("#ump").hasClass(...

但还要注意.slideUp()and.slideDown()方法隐藏和显示你的元素，所以你不需要调用.hide()and .show()。如果您希望它们对同一元素进行操作，将 jQuery 方法链接在一起会更有效：

$(".bd").click(function () {
    if ($("#ump").hasClass("active")) {
        $(".brandDump").slideUp("slow")
                       .removeClass("active");
    } else {
        $(".brandDump").slideDown("slow")
                       .addClass("active");
    }
});

演示：http: //jsfiddle.net/K2V8f/50/

“检查 id 为 'ump' 的 div 是否有一个 'active' 类 > 如果有，获取 div 类为 'brandDump' 并慢慢向上滑动”

带有 idump的div 与带有 class的 div相同brandDump。我不确定你为什么把它们当作两个不同的 div 来谈论，而实际上你的代码似乎可以互换地使用#umpand.brandDump选择器来选择一个 div，但是如果你更一致地将它们视为一个 div，你可以将您的功能缩减为一行：

$(".bd").click(function () {
    $(".brandDump").slideToggle("slow").toggleClass("active");
});

演示：http: //jsfiddle.net/K2V8f/51/

于 2013-10-27T02:45:08.430 回答