JavaScript滑动切换不工作

我遇到了一件我不明白的小事情，我想知道你是否可以试试看

首先，有以下代码：

<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>

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

该方法找不到兄弟姐妹或堂兄弟姐妹，它从当前元素（

.smry

，在你的例子中）开始，然后经过祖先，在找到匹配项时停止（如果没有匹配项，则返回一个空的jQuery对象）

请尝试以下方法：

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

这将导航到最近的包含

.main container

元素，然后使用返回到其关联的

.summary

元素

演示：

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

---

（还要注意，您的summary div需要有一些实际的内容才能使其有意义。）

我建议只使用

$（“.main container.summary”）

而不是

最近的
。这是一个有点繁重的操作。你在
.summary
里有什么东西吗。如果它是空的，我认为您不会看到任何东西。
除了错误的选择器之外，您必须在.summary div中设置一个内容，否则您将看到任何东西请注意，这些元素位于li元素中，可以合理地假设有许多其他具有相同结构和类的同级li元素<代码>$（“.main container.summary”）
可能匹配多个元素。这并不是所有情况下的好建议。页面上可能有多个类为
主容器
或
smry
的元素
$（此）
是单击的元素，
.closest（）
可用于任意数量的元素。另外，如果你关心速度的话，穿越速度是相当快的。但是请记住，
.closest（）
并不能满足OP的要求。大家好，谢谢你们的回答，但是，正如“nnnnnn”所说，还有许多其他的“li”元素，“$（“.main container.summary”）”将显示它们。我认为这是css选择器和命名的问题。我不喜欢最近的方法，因为它们看起来很棘手。总之@nnnnnn的答案是正确的。谢谢！代码运行得很好。我不知道我怎么没想到：）
$('.main-container .smry').click(function () {
    $(this).closest(".main-container").find(".summary").slideToggle(100);
});