这就是我希望它做的事情...
当单击名为"bd"的div 时>检查 id 为"ump"的div 是否具有"活动"类>如果是这样,获取带有"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");
}
});
更新的小提琴
您需要在 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")
问题是你有:
"#ump".hasClass(...
。当你应该有:
$("#ump").hasClass(...
但另请注意,.slideUp()
和 .slideDown()
方法隐藏并显示您的元素,因此您也不需要调用 .hide()
和 .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 是否具有"活动"类>如果有,则使用"brandDump"类获取div 并将其慢慢向上滑动"
ID 为 ump
的div 与类 brandDump
的 div 相同。我不确定你为什么要谈论它们,就好像它们是两个不同的div,而实际上你的代码似乎可以互换使用 #ump
和.brandDump
选择器来选择一个div,但如果你更一致地将它们视为一个,您可以将函数缩减为一行:
$(".bd").click(function () {
$(".brandDump").slideToggle("slow").toggleClass("active");
});
演示:http://jsfiddle.net/K2V8f/51/