Question

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

目前我的问题是：

单击li时，所有子项（.sub-menu）都将处于活动状态状态。
单击子菜单后单击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');

单击子项时从父项中删除活动状态，反之亦然

1 个答案: