我遇到了一些我无法弄清楚的事情,我想知道你是否可以参与其中。
首先,有这段代码:
<li class="mc002">
<ul>
<li>
<div class="label-container">
<a class="btn">label 1</a>
<a class="btn">label 2</a>
</div>
<div class="main-container">
<div class="prj-title">
<h3><a href="">New design for my website</a></h3>
<div class="buttons">
<button data-role="none" class="btn smry">summary</button>
</div>
</div>
<div class="summary">
</div>
<div class="prj-footer">
<h6>filed under:</h6>
<span>webdesign, webdevelopment, UX design</span>
<h6>skills:</h6>
<span>html5, css3, javascript, php</span>
</div>
</div>
</li>
和要使“摘要”向下滑动的JavaScript:
$('.main-container .smry').click(function () {
$(this).closest(".summary").slideToggle(100);
});
这个问题是它不起作用。你能帮帮我吗?
答案 0 :(得分:1)
.closest()
方法找不到兄弟姐妹或堂兄弟,它从当前元素(.smry
开始)开始,然后通过祖先上升,在找到匹配时停止(或者如果没有匹配则返回一个空的jQuery对象。)
请改为尝试:
$('.main-container .smry').click(function () {
$(this).closest(".main-container").find(".summary").slideToggle(100);
});
这会导航到最接近的包含.main-container
元素的内容,然后使用.find()
返回其关联的.summary
元素。
请注意,您的代码需要位于文档就绪处理程序和/或出现在相关元素之后的脚本块中。
(另请注意,您的汇总div需要有一些实际内容才能理解。)
答案 1 :(得分:0)
我建议只使用$(".main-container .summary")
代替closest
。这是一个有点繁重的操作。你在.summary
中有什么东西吗?如果它是空的我不认为你会看到一些东西。