单击子节点时从父级移除活动状态，反之亦然

Question

我需要一种方法让我的活动状态在我的侧边栏中正常工作。

目前我的问题是：

1. 当单击li时，所有子菜单(.子菜单)都接收活动状态状态。
2. 当在单击子菜单li之后单击li (非子菜单)时，单击的子菜单li的活动状态不会被移除。

希望你能帮上忙。

$("#sidebar li").click(function(){
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
    $('#sidebar li').children().removeClass('active');
});

html

<div class="col-md-4" id="sidebar">
    <?php
    if (is_page('gulvservice')){
        wp_nav_menu(array('menu'=>'gulvservice' ));
    } elseif (is_page('malerservice')) {
        wp_nav_menu(array('menu'=>'malerservice' ));
    } elseif (is_page('industrilakering')) {
        wp_nav_menu(array('menu'=>'industrilakering' ));
    }
    ?>
    <!-- <?php wp_nav_menu( array( 'theme_location' => 'gulvservice' ) ); ?> -->
    <div class="gulvservice-kontaktinfo">
        <p>EM. Meyers Eftf. A/S</p>
        <p>CVR: 82510028</p>
        <p>Tlf.: 36349500 / 40384053</p>
        <p>E-mail: gulve@meyers.dk</p>
    </div>
</div>

呈现的html：

​

​

Answer 1

找到了解决这两个问题的方法。

1：

我通过css而不是jquery使用伪元素实现了这一点。我做的原因是:在元素之前，是因为我的子菜单列表项上有一些缩进。

CSS：

#sidebar ul li{
    text-align: left;
    padding-left:25px;
    position:relative;
}

#sidebar ul li a{
text-decoration: none;
color:white;
text-align:left;
position:relative;
z-index:100000;
}


#sidebar ul li:hover:after:not(.submenu){
    content: "";
    width:100%;
    height:50px;
    position:absolute;
    top:0;
    left:0;
    z-index:100;
    background: rgba(0,0,0,0.4);
}

#sidebar ul li.active:after{
    content: "";
    width:100%;
    height:50px;
    position:absolute;
    top:0;
    left:0;
    z-index:100;
    background: rgba(0,0,0,0.4);
}

#sidebar ul li ul li:hover:after{
    content: "";
    width:100%;
    height:50px;
    padding-left:25px;
    position:absolute;
    top:0;
    left:0;
    z-index:100;
    background: rgba(0,0,0,0.4);
}


#sidebar ul li ul li:hover:before{
    content: "";
    width:25px;
    height:50px;
    position:absolute;
    top:0;
    left:-25px;
    z-index:100;
    background: rgba(0,0,0,0.4);
}

#sidebar ul li ul li.active:after{
    content: "";
    width:100%;
    height:50px;
    padding-left:25px;
    position:absolute;
    top:0;
    left:;
    z-index:100;
    background: rgba(0,0,0,0.4);
}

#sidebar ul li ul li.active:before{
    content: "";
    width:25px;
    height:50px;
    position:absolute;
    top:0;
    left:-25px;
    z-index:100;
    background: rgba(0,0,0,0.4);
}

2:信用归于@mark.hch

首先，从所有列表项中删除活动类。接下来，将活动类添加到单击的列表项中。

$('#sidebar li').removeClass('active');
$(this).addClass('active');