單擊子級時，從父級中刪除活動狀態，反之亦然

Question

我需要一種方法來使我的活動狀態在側邊欄中正常工作。

目前我的問題是：

1. 單擊li時，所有子級（.sub-menu）都會收到活動狀態state。

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使用偽元素實現了這一點。 我之所以做出：before元素的原因是由於我的子菜單列表項有些縮進。

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');