Question

我正在尝试jquery slidetoggle，但我在尝试运行它时遇到了问题。请检查提供的小提琴。 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");
});

Jquery Slide Toggle没有触发

1 个答案: