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

点击事件在a上触发，当您使用next时，它会搜索a sibbling哪个类show-more。要解决此问题，请在parent之前使用next，这样您就可以在show-more之后搜索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();
    });

JQuery点击后切换下一个div

4 个答案: