どのようにアクティブなjQueryアコーディオンメニューを作成しますか？

Question

私はjQueryのシンプルな垂直アコーディオンメニューを持っています。

Javascriptを：

$(document).ready(function() { 
 
    $('#nav > li > a').click(function(){ 
 
    if ($(this).attr('class') != 'active'){ 
 
     $('#nav li ul').slideUp(); 
 
     $(this).next().slideToggle(); 
 
     $('#nav li a').removeClass('active'); 
 
     $(this).addClass('active'); 
 
    } else { 
 
     $('#nav li ul').slideUp(); 
 
     $('#nav li a').removeClass('active'); 
 
    } 
 
    }); 
 
});

#nav li ul { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="nav"> 
 
    <li><a href="#">Item 1</a> 
 
    <ul> 
 
     <li><a href="#">Sub-Item 1 a</a></li> 
 
     <li><a href="#">Sub-Item 1 b</a></li> 
 
     <li><a href="#">Sub-Item 1 c</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Item 2</a> 
 
    <ul> 
 
     <li><a href="#">Sub-Item 2 a</a></li> 
 
     <li><a href="#">Sub-Item 2 b</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Item 3</a> 
 
    <ul> 
 
     <li><a href="#">Sub-Item 2 a</a></li> 
 
     <li><a href="#">Sub-Item 2 b</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Item 4</a> 
 
    <ul> 
 
     <li><a href="#">Sub-Item 2 a</a></li> 
 
     <li><a href="#">Sub-Item 2 b</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

iはクラスshowmenuを持って欲しい、と私は、 "項目3" のために、このクラスを追加する場合、このメニューは自動的にページロードオープンとなります。どのようにこの

Answer 1

ちょうどshowmenuクラス

$('.showmenu ul').slideDown(); 

$(document).ready(function() { 
 
    $('.showmenu ul').slideDown(); 
 
    $('#nav > li > a').click(function(){ 
 
    if ($(this).attr('class') != 'active'){ 
 
     $('#nav li ul').slideUp(); 
 
     $(this).next().slideToggle(); 
 
     $('#nav li a').removeClass('active'); 
 
     $(this).addClass('active'); 
 
    } else { 
 
     $('#nav li ul').slideUp(); 
 
     $('#nav li a').removeClass('active'); 
 
    } 
 
    }); 
 
});

#nav li ul { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="nav"> 
 
     <li><a href="#">Item 1</a> 
 
     <ul> 
 
      <li><a href="#">Sub-Item 1 a</a></li> 
 
      <li><a href="#">Sub-Item 1 b</a></li> 
 
      <li><a href="#">Sub-Item 1 c</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Item 2</a> 
 
     <ul> 
 
      <li><a href="#">Sub-Item 2 a</a></li> 
 
      <li><a href="#">Sub-Item 2 b</a></li> 
 
     </ul> 
 
     </li> 
 
     <li class="showmenu"><a href="#">Item 3</a> 
 
     <ul> 
 
      <li><a href="#">Sub-Item 2 a</a></li> 
 
      <li><a href="#">Sub-Item 2 b</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Item 4</a> 
 
     <ul> 
 
      <li><a href="#">Sub-Item 2 a</a></li> 
 
      <li><a href="#">Sub-Item 2 b</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul>