Remove active state from parent when child is clicked and vice versa

4 Views

I need need a way to get my active state to work properly in my sidebar.

Currently my problems are:

Read More

  1. When a li is clicked, all children (.sub-menu) receive the active state state.

  2. When a li (not sub-menu) is clicked after having clicked a submenu li the active state of the clicked submenu li is not removed.

Hope you can help. 

$("#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>

rendered html:

enter image description here

Post Views: 4

Related posts

1 comment

  1. Found solutions to both problems.

    1:

    I achieved this using pseudo elements through css instead of jquery.
    The reason i made some :before elements was due to some indentation on my sub-menu list items.

    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: Credit goes to @mark.hch

    First remove active class from all list items.
    Next add active class to the clicked list item.

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

Comments are closed.