JavaScript slideToggle无效

Question

我遇到了一些我无法弄清楚的事情，我想知道你是否可以参与其中。

首先，有这段代码：

<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);
});

这个问题是它不起作用。你能帮帮我吗？

Answer 1

.closest()方法找不到兄弟姐妹或堂兄弟，它从当前元素（.smry开始）开始，然后通过祖先上升，在找到匹配时停止（或者如果没有匹配则返回一个空的jQuery对象。）

请改为尝试：

$('.main-container .smry').click(function () {
    $(this).closest(".main-container").find(".summary").slideToggle(100);
});

这会导航到最接近的包含.main-container元素的内容，然后使用.find()返回其关联的.summary元素。

演示：http://jsfiddle.net/4a8JC/

请注意，您的代码需要位于文档就绪处理程序和/或出现在相关元素之后的脚本块中。

（另请注意，您的汇总div需要有一些实际内容才能理解。）

Answer 2

我建议只使用$(".main-container .summary")代替closest。这是一个有点繁重的操作。你在.summary中有什么东西吗？如果它是空的我不认为你会看到一些东西。