Jquery Slide up and Slide down -first li always slide down

Question

i have nested ul li list

Dental

• Isolation Materials
  • Pulp Devitalizer
  • Etchants
• Orthodontics
• Dental Medicines

Oral

Using the following html

<ul class="nav" id="product-cat-menu">
<li>
    <span class="right-plus main-plus"><i class="fa fa-plus-square-o"></i></span>Dental
    <ul>
      <li>
        <span class="right-plus "><i class="fa fa-plus-square-o"></i></span>Isolation Materials
        <ul>
          <li>Pulp Devitalizer</li>
          <li>Etchants</li>
        </ul>
      </li>
      <li>
        Orthodontics
      </li>
      <li>
         <span class="right-plus "><i class="fa fa-plus-square-o"></i></span>Dental Medicines
      </li>
    </ul>
   </li>
   <li>
     Oral
   </li>

#product-cat-menu ul{
display: none;
}

And i am using the following jquery for slide up and slide down the list is

$(document).ready(function () {       
$("#product-cat-menu .right-plus").click(function (evt) {
    var $this = $(this);        
    $this.closest('li').siblings().find('ul').slideUp();       
    $this.siblings().slideDown();
    $this.find('i').removeClass("fa-plus-square-o");        
    $this.closest('li').siblings().find('span i').addClass("fa-plus-square-o");
    evt.preventDefault();        
});    
});

This is working perfectly... but actualy i need, the first li always slide down when page load. How it possible

Answer 1

您可以使用以下方法触发第一个跨度的click事件：

 $("#product-cat-menu .right-plus:first").click();

Answer 2

You can achieve this by adding following line your code

$(document).ready(function () {       
  $("#product-cat-menu .right-plus").click(function (evt) {
     //your code
  });    
  $("#product-cat-menu .right-plus").eq(0).click();
});

Answer 3

add .first().click() after the click event

the final code will look like

$(document).ready(function () {       
    $("#product-cat-menu .right-plus").click(function (evt) {
        var $this = $(this);        
        $this.closest('li').siblings().find('ul').slideUp();       
        $this.siblings().slideDown();
        $this.find('i').removeClass("fa-plus-square-o");        
        $this.closest('li').siblings().find('span i').addClass("fa-plus-square-o");
        evt.preventDefault();        
    }).first().click(); // new line
});