Question

我有一个问题。实际上我有这个结构：jsfiddle link

当我点击"Link example 2 with accordion"时，它会扩展ul。
但是当我点击其中的任何链接时，它会被隐藏，因为链接下 "Link example 2 with accordion"位于<li class="accordion">内。

我的问题是：如何阻止这种行为？

Answer 1

向孩子添加课程

<ul>
    <li><a href="#">Link example 1</a> </li>
    <li class="accordion">
        <a href="#">Link example 2 with accordion</a>
        <ul class="child" style="display: none;">
            <li><a href="#">Link inside accordion 2</a></li>
            <li><a href="#">Link inside accordion 3</a></li>
        </ul>
    </li>
    <li><a href="#">Smth</a> </li>
</ul>

脚本

$(".child").click(function(e) {
    e.stopPropagation();
});

Answer 2

只需对子元素使用event.stopPropagation（）即可。你甚至不需要课程

$("li > ul").click(function(event){
    event.stopPropagation();
});

小提琴：https://jsfiddle.net/Nillervision/0gzx9Lv8/#base

Answer 3

将点击处理程序附加到锚标记而不仅仅是手风琴。像这样的东西

$(".accordion a").click(function (e) {
    var closestLi = $(this).closest('li');
    if (closestLi.hasClass('active')) {
        closestLi.children('ul').slideUp();
        closestLi.removeClass('active');
    } else {
        closestLi.children('ul').slideDown();
        closestLi.addClass('active');
    }
});

这是一个演示 https://jsfiddle.net/dhirajbodicherla/e7bm4mcf/2/

Answer 4

如果您实际点击了li元素，则可以检查代码。如果不是，我们在点击处理程序中什么都不做。

我认为这是最干净的解决方案：

＆＃13;

        $( ".accordion").click(function(e) {
            // Check if the parent of the target is the same as the .accordion we bound the event to
            if (e.target.parentElement !== this) return;
            
            if ($(this).hasClass('active')){
                $(this).children('ul').slideUp();
                $(this).removeClass('active');
            }else{
                $(this).children('ul').slideDown();
                $(this).addClass('active');
            }
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
                       <li><a href="#">Link example 1</a> </li>
                       <li class="accordion">
                           <a href="#">Link example 2 with accordion</a>
                           <ul style="display: none;">
                               <li><a href="#">Link inside accordion 2</a></li>
                               <li><a href="#">Link inside accordion 3</a></li>
                           </ul>
                       </li>
                       <li><a href="#">Smth</a> </li>
                   </ul>

＆＃13;

在javascript中覆盖onclick事件

4 个答案: