垂直滚动菜单CSS无法折叠

Question

我正在使用垂直滚动菜单，我试图保留它以便在加载时保持折叠状态。只有在单击测试1或测试2时才会展开列表。

此外，我试图单独折叠每个列表

我试过玩css。 set display：none。它没有帮助

任何提示都会有所帮助。

先谢谢

工作小提琴：http://jsfiddle.net/K8hYg/

<div class="menu_div">
<ul id="active">
<li id="active"><a href="#">Test 1</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
<li id="active"><a href="#">Test 2 </a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</li>
</ul>
</div>

和Jquery

<script type="text/javascript">
$(document).ready(function () {
$('#active > li > a').click(function(){
if ($(this).attr('class') != 'active'){
$('#active li ul').slideUp();
$(this).next().slideToggle();
$('#active li a').removeClass('active');
$(this).addClass('active');
}
}); 
});
</script>

Answer 1

检查jsFiddle

HTML

 <div class="menu_div">
    <ul id="active">
       <li id="active"><a href="#">Test 1</a>
        <ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
        </ul>
       </li>
       <li id="active"><a href="#">Test 2 </a>
        <ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
           <li><a href="#">Item 5</a></li>
        </ul>
       </li>
    </ul>
 </div>

CSS

.menu_div ul
{
    padding:0px;
    margin:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    color:#FFF;
    list-style:none;
    text-indent:15px;
}
.menu_div ul li
{
    background:#3f3f3f;
    line-height:28px;
        border-bottom:1px solid #333;
}
.menu_div ul li a
{
    text-decoration:none;
    color:#FFF;
    display:block;
}
.menu_div ul li a:hover
{
    background:#ff850d;
}
.menu_div ul li#active
{
    background:#ff850d;
}

JQuery的

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