Question

我正在尝试创建一个双开合边栏。侧边栏中的每个li都可以有一个列表，可以自己列出一个列表。一个例子：

<div class="list-panel">
    <ul>
        <li class="category">
            <a href="/inphos/">
                <i class="glyphicon glyphicon-home"></i>
                <span class="nav-label">Dashboard</span>
            </a>
        </li>
        <li class="category">
            <a href="#">
                <i class="glyphicon glyphicon-pencil"></i>
                <span class="nav-label">Administratie</span>
            </a>
            <ul>
                <li class="group">
                    <a href="#">Abonnementen</a>
                    <ul>
                        <li>
                            <a href="#">Abo-Orders</a>
                        </li>
                        <li>
                            <a href="#">VoIPGrid</a>
                        </li>
                        <li>
                            <a href="#">RoutIT</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

顶级李有类＆＃34;类别＆＃34;。当我点击下面的1级，上课＆＃34; group＆＃34;时，我不想滑动整个＆＃34;类别＆＃34;起来，但打开下面的列表＆＃34; group＆＃34;或重定向用户。

我试图用以下方法做到这一点：

$('.group').on('click', function(){
    console.log('group');
}).on('click','ul>li',function(e){
    e.stopPropagation();
}).on('click','category',function(e){
    e.stopPropagation();
});

$('.category').on('click',function(){
    console.log('category');
    if($(this).hasClass('active')){
        $(this).children('ul').slideUp(200);
        $(this).removeClass('active');
    } else {
        $(this).children('ul').slideDown(200);
        $(this).addClass('active');
    }
});

由于某种原因，这段jQuerycode无法正常运行，为什么会有任何想法？

jsFiddle这里：http://jsfiddle.net/abayob/bo4bkfzq/

Answer 1

打破这个： -

$('.group').on('click', function(){
    console.log('group');
}).on('click','ul>li',function(e){
    e.stopPropagation();
}).on('click','category',function(e){
    e.stopPropagation();
});

你可以在这里看到： -

$('.group').on('click','category',function(e){
    e.stopPropagation();
});

这是在category内寻找group 元素，而不是类。它找不到。将category更改为.category仍然无效，因为category是group的父级。

试试这个： -

$(document).ready(function(){
    $('.category, .group').on('click',function(){
        console.log('category');
        if($(this).hasClass('active')){
            $(this).children('ul').slideUp(200);
            $(this).removeClass('active');
        } else {
            $(this).children('ul').slideDown(200);
            $(this).addClass('active');
        }
        return false;
    });
});

li {
    list-style-type: none;
}
li a {
    text-decoration:none;
    color:black;
    font-family: Times;
    border-bottom: 1px solid #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-panel">
    <ul>
        <li class="category">
            <a href="/inphos/">
                <i class="glyphicon glyphicon-home"></i>
                <span class="nav-label">Dashboard</span>
            </a>
        </li>
        <li class="category active">
            <a href="#">
                <i class="glyphicon glyphicon-pencil"></i>
                <span class="nav-label">Administratie</span>
            </a>
            <ul>
                <li class="group active">
                    <a href="#">Abonnementen</a>
                    <ul>
                        <li>
                            <a href="#">Abo-Orders</a>
                        </li>
                        <li>
                            <a href="#">VoIPGrid</a>
                        </li>
                        <li>
                            <a href="#">RoutIT</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

return false;会阻止默认事件并阻止它冒泡。

另外，将active课程添加到category和group，然后将其打开。

Answer 2

您从未为.group元素添加e.stopPropagation（），您只需拥有console.log()。请记住将e作为参数添加到事件函数中。

此外，您还要添加“有效”状态＆＃39;在开始时列到您的列表。现在，只需点击两下即可获得任何明显的变化。

停止传播不起作用 - ul＆gt; li＆gt; ul＆gt; li - jQuery

2 个答案: