垂直滚动菜单CSS无法折叠

Vertical Scrolling Menu CSS unable to Collapse

本文关键字：折叠 CSS 滚动 菜单 垂直      更新时间：2023-09-26

我正在使用一个垂直滚动菜单，我试图保持它，使它在加载时保持崩溃。列表应该只在单击Test 1或Test 2时展开。

我也试图单独折叠每个列表

我试着摆弄css。设置显示:none。它没有帮助

任何提示都会有帮助。

Thanks in Advance

工作小提琴: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>

查看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');
    }
  });
});
相关文章：