jquery - 点击后JQuery切换下一个div

Question

我无法确定下一个 div 的目标是用 JQuery 显示/隐藏它。

JavaScript：

    $("a.more").live("click", function(event){
        event.preventDefault();
        $(this).next('.show-more').toggle();
    }); 

DOM：

            <p>
                {{beschreibung}}
                (<a class="more" href="{{id}}"><i class="icon-plus"></i>)
            </p>

            <div class="show-more" style="display:none;">
                <p>
                   {{beschreibung_lang}}
               </p>
            </div>

任何想法问题出在哪里？

屏幕和键盘之间的故障：错过了关闭标签（-;

Answer 1

在事件处理程序中绑定的元素是锚点，并且锚点没有兄弟元素，即 next() 将不起作用。您需要首先遍历 DOM 到最近的段落，然后找到下一个 div 等。

live()已弃用，应替换on()为动态元素的委托版本，如下所示：

$(document).on("click", ".more", function(event){
    event.preventDefault();
    $(this).closest('p').next('.show-more').toggle();
}); 

Answer 2

click 事件在 上触发a，当你使用next它时会搜索asibbling 哪个类的show-more. 要修复它，请使用parentbefore next，因此您将搜索show-morewhich's after p。

$(this).parent().next('.show-more').toggle();

Answer 3

试试下面

 $("a.more").bind("click", function(event){
    event.preventDefault();
    $(this).parent().next('.show-more').toggle();
});

Answer 4

锚标签和 div 不是兄弟，所以你必须使用 parent() -

   $("a.more").live("click", function(event){
        event.preventDefault();
        $(this).parent().next('.show-more').toggle();
    });