Jquery 滑动切换未触发

Question

我正在尝试 jquery Slidetoggle，但在尝试运行它时遇到问题。请检查提供的 fiddle 。 https://jsfiddle.net/2yL2Q/63/

当我单击翻转类时，它没有执行任何操作。

代码示例

<div class="some-div">
<div class="flip">Click to slide the panel down or up</div>
</div>
<div class="panel">Hello world!</div>

<div class="some-div">
<div class="flip">Click to slide the panel down or up</div>
</div>
<div class="panel">Hello world!</div>

<div class="some-div">
<div class="flip">Click to slide the panel down or up</div>
</div>
<div class="panel">Hello world!</div>

脚本

$(document).ready(function () {
    $(".some-div .flip").click(function () {
        $(this).next('.panel').slideToggle("slow");
    });
});

Answer 1

您正在尝试选择一个 .panel 元素，该元素是所单击的 .flip 元素的下一个相邻同级元素。为了使 jQuery 正常工作，您的标记需要如下所示:

<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>

由于这些元素在您提供的 HTML 中不是同级元素，因此您需要遍历 DOM 并选择父元素。只需使用 .parent() method :

Updated Example

$(".some-div .flip").click(function () {
    $(this).parent().next('.panel').slideToggle("slow");
});

或者，如果元素的深度/嵌套不同，您也可以使用 .closest() method :

Updated Example

$(".some-div .flip").click(function () {
    $(this).closest('.some-div').next('.panel').slideToggle("slow");
});