Question 37001 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

I want the first li be opened by default and when I click on an "a" tag that is opened the ul following don't close – Jquery

   Here my html :
    <ul id="navLeft">
      <li>
        <a class="nav_a">aaaa</a>
        <ul class="children">
          <li><a>1111</a></li>
          <li><a>1111</a></li>
          <li><a>1111</a></li>
        </ul>
      </li>
      <li>
        <a class="nav_a">bbbb</a>
        <ul class="children">
          <li><a>2222</a></li>
          <li><a>2222</a></li>
          <li><a>2222</a></li>
        </ul>
      </li>
      <li>
        <a class="nav_a">cccc</a>
        <ul class="children">
          <li><a>3333</a></li>
          <li><a>3333</a></li>
          <li><a>3333</a></li>
        </ul>
      </li>
    </ul>
    </body>
    
    CSS:
     .children{
      display: none;
    }


jquery:
     $(".nav_a").click(function () {
        $('ul.children').not($(this).next('ul.children')).removeClass("expanded").slideUp();
        $(this).next('ul.children').toggleClass("expanded").slideToggle(250);
    });
Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0 
      $(".nav_a").click(function () {
         if($(this).next('ul.children').hasClass("expanded"))
      return;    
  
  $('ul.children').not($(this).next('ul.children')).removeClass("expanded").slideUp();
        $(this).next('ul.children').toggleClass("expanded").slideToggle(250);

});

  2. 0 
    #navLeft li:first-child .children{
 display:block;
}

    I hope this css is what you are looking for. If this is not working Please give a detailed description.

    Login or Signup to reply.
  3. 0

    Can you please Check the below script instead of your script and tell me this is what you are looking for.

    $('#navLeft li>a').click(function(){
    $('ul.children').not($(this).next('ul.children')).removeClass("expanded").slideUp();
    $(this).next('ul.children').toggleClass("expanded").slideToggle(250);
});

    If this is what you are trying to acheive then don’t forget to mark it as a correct answer.

    Login or Signup to reply.
  4. 0 
    $('#navLeft li>a').click(function(){
        $(this).next('ul.children').toggleClass("expanded").slideDown(250);
    });

    Try the above script instead of the script You are using

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search