如何使选定的菜单保持选定的jQuery，CSS，html

Question

accordian menu , has to make the submenu to stay selected after clicking by js. or css .

not the static solution in html. need solution comprising jquery and the css it should appear same as hovering after clicked

check out the fiddle

https://jsfiddle.net/shaswatatripathy/ucgff65k/

 $(document).ready(function() { $("#accordion > li > div").click(function() { $("#submenu li").slideUp(); if (!$(this).next().is(":visible")) { $(this).next().slideDown(); } }); }); 

 .accordion { width: 100%; max-width: 260px; background: #FFF; margin: 0; padding: 0; box-sizing: border-box; } .accordion .link { cursor: pointer; display: block; padding: 15px 15px 15px 42px; font-size: 14px; font-weight: 700; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; border-right: 1px solid #CCC; position: relative; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } /*-------------Submenu-----------------------------*/ .submenu { padding: 0px; display: none; font-size: 14px; } .submenu li { border-bottom: 1px solid #4b4a5e; } .submenu a { display: block; text-decoration: none; color: #23222d; background-color: #CCC; padding: 12px; padding-left: 42px; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } #submenu li.active { display: block; } .submenu a:hover { background: #b63b4d; color: #FFF; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul id="accordion" class="accordion"> <li> <div class="link">Menu 2</div> <ul class="submenu"> <li><a href="#">submenu1</a></li> <li><a href="#">submenu1</a></li> <li><a href="#">submenu1</a></li> </ul> </li> <li> <div class="link">Menu 3</div> <ul class="submenu"> <li><a href="#">submenu1</a></li> <li><a href="#">submenu1</a></li> <li><a href="#">submenu1</a></li> </ul> </li> </ul> 

Answer 1

Hope this is what you're looking for,

 $(document).ready(function() { $("#accordion > li > div").click(function() { $("#submenu li").slideUp(); if (!$(this).next().is(":visible")) { $(this).next().slideDown(); } }); $(".submenu li a").click(function(){ $(".submenu li a.active").removeClass("active"); $(this).addClass("active"); }); }); 

 .accordion { width: 100%; max-width: 260px; background: #FFF; margin: 0; padding: 0; box-sizing: border-box; } .accordion .link { cursor: pointer; display: block; padding: 15px 15px 15px 42px; font-size: 14px; font-weight: 700; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; border-right: 1px solid #CCC; position: relative; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } /*-------------Submenu-----------------------------*/ .submenu { padding: 0px; display: none; font-size: 14px; } .submenu li { border-bottom: 1px solid #4b4a5e; } .submenu a { display: block; text-decoration: none; color: #23222d; background-color: #CCC; padding: 12px; padding-left: 42px; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } #submenu li.active { display: block; } .submenu a:hover { background: #b63b4d; color: #FFF; } .submenu li a.active { background: #b63b4d; color: #FFF; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="accordion" class="accordion"> <li> <div class="link">Menu 2</div> <ul class="submenu"> <li><a href="#">submenu1</a></li> <li><a href="#">submenu1</a></li> <li><a href="#">submenu1</a></li> </ul> </li> <li> <div class="link">Menu 3</div> <ul class="submenu"> <li><a href="#">submenu1</a></li> <li><a href="#">submenu1</a></li> <li><a href="#">submenu1</a></li> </ul> </li> </ul> 

Answer 2

Create an .active class for the <a> tag inside <li> which matches the CSS of the :hover state of <a> , like this:

a.active {
  background: #b63b4d;
  color: #FFF;
}

And then just use the click event listener to add and remove this class when clicked on the submenu:

 $(document).ready(function() {

   $("#accordion > li > div").click(function() {
     if (!$(this).next().is(":visible")) {
       $(this).next().slideDown();
     } else {
       $(this).next().slideUp();
     }
   });

   $(".submenu a").click(function() {
            $(this).toggleClass("active").parent().siblings().find("a").removeClass("active");
   });

 });

I also modified to jQuery so that the accordion closes when it is clicked on in the open state.

Here's the working jsfiddle: https://jsfiddle.net/ucgff65k/2/ And the code snippet:

  $(document).ready(function() { $("#accordion > li > div").click(function() { if (!$(this).next().is(":visible")) { $(this).next().slideDown(); } else { $(this).next().slideUp(); } }); $(".submenu a").click(function() { $(this).toggleClass("active").parent().siblings().find("a").removeClass("active"); }); }); 

 .accordion { width: 100%; max-width: 260px; background: #FFF; margin: 0; padding: 0; box-sizing: border-box; } .accordion .link { cursor: pointer; display: block; padding: 15px 15px 15px 42px; font-size: 14px; font-weight: 700; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; border-right: 1px solid #CCC; position: relative; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } /*-------------Submenu-----------------------------*/ .submenu { padding: 0px; display: none; font-size: 14px; } .submenu li { border-bottom: 1px solid #4b4a5e; } .submenu a { display: block; text-decoration: none; color: #23222d; background-color: #CCC; padding: 12px; padding-left: 42px; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .submenu a:hover { background: #b63b4d; color: #FFF; } a.active { background: #b63b4d; color: #FFF; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="accordion" class="accordion"> <li> <div class="link">Menu 2</div> <ul class="submenu"> <li><a href="#">submenu1</a></li> <li><a href="#">submenu1</a></li> <li><a href="#">submenu1</a></li> </ul> </li> <li> <div class="link">Menu 3</div> <ul class="submenu"> <li><a href="#">submenu1</a></li> <li><a href="#">submenu1</a></li> <li><a href="#">submenu1</a></li> </ul> </li> </ul>