jQuery 手风琴菜单折叠

Question

我有一个手风琴菜单，当您单击“活动”选项卡时，它不会自行倒塌。如果您单击任何其他选项卡，则之前的活动选项卡会折叠好...

我真的看不出 jQuery 函数有什么问题。

我创建了一个 jsfiddle 来调试它，但到目前为止我运行的任何东西都会给出相同的结果。

非常感谢任何帮助

http://jsfiddle.net/qz52V/1/

html:

<div id="accordianSide">
<ul>
    <li>
        <h3><span class="icon-desktop"></span>Channels We Support</h3>
        <ul class="sub_Menu">
            <li><a href="#"><span class="icon-double-angle-right"></span>Main Page</a></li>
        </ul>
    </li>
    <!-- we will keep this LI open by default -->
    <li>
        <h3><span class="icon-bar-chart"></span>Market Places</h3>
        <ul class="sub_Menu">
            <li><a href="#"><span class="icon-double-angle-right"></span>Main Page</a></li>
            <li><a href="#"><span class="icon-double-angle-right"></span>Inventory Management</a></li>
            <li><a href="#"><span class="icon-double-angle-right"></span>Listing Management</a></li>
            <li><a href="#"><span class="icon-double-angle-right"></span>Order Management</a></li>
            <li><a href="#"><span class="icon-double-angle-right"></span>Reporting &#038; Analytics</a></li>
        </ul>
    </li>
    <li>
        <h3><span class="icon-credit-card"></span>Paid Search</h3>
        <ul class="sub_Menu">
            <li><a href="#"><span class="icon-double-angle-right"></span>Main Page</a></li>
            <li><a href="#"><span class="icon-double-angle-right"></span>Inventory Driven Search</a></li>
            <li><a href="#"><span class="icon-double-angle-right"></span>Keyword Expansion</a></li>
            <li><a href="#"><span class="icon-double-angle-right"></span>Bid Management</a></li>
            <li><a href="#"><span class="icon-double-angle-right"></span>Search Query Analysis</a></li>
            <li><a href="#"><span class="icon-double-angle-right"></span>Campaign Management</a></li>
            <li><a href="#"><span class="icon-double-angle-right"></span>Reporting &#038; Analytics</a></li>
        </ul>
    </li>
</ul>

jQuery:

$(document).ready(function () {
  $('#accordianSide h3').click(function(){
    if ($(this).attr('class') != 'activeAcc'){
      $('#accordianSide ul ul').slideUp();
      $(this).next().slideToggle();
      $('#accordianSide h3').removeClass('activeAcc');
      $(this).addClass('activeAcc');
    }
  });
});

css:

#accordianSide {
background: #fff;
width: 230px;
color: #000;
font-family: 'Open Sans', arial, verdana;
}

/*heading styles*/
#accordianSide h3 {
font-size: 12px;
line-height: 50px;
padding: 0 10px;
cursor: pointer;
background: #fff; 
}
/*heading hover effect*/
#accordianSide h3:hover {
color:#21abe2;
background:#f1f1f1;
}
/*iconfont styles*/
#accordianSide h3 span {
font-size: 16px;
margin-right: 10px;
}
/*list items*/
#accordianSide li {
list-style-type: none;
}
/*links*/
#accordianSide ul ul li a {
color: #000;
text-decoration: none;
font-size: 12px;
line-height: 27px;
display: block;
padding: 0 15px;
transition: all 0.15s;
}
/*hover effect on links*/
#accordianSide ul ul li a:hover {
background: #f1f1f1;
border-left: 5px solid #21abe2;
color:#21abe2;
}
#accordianSide ul ul {
display: none;
}
#accordianSide li.activeAcc ul {
display: block;
}
.activeAcc {
color:#21abe2;
}

Answer 1

将此代码添加给您

else {
    $('#accordianSide ul ul').slideUp();
    $('#accordianSide h3').removeClass('activeAcc');
}

结果

$(document).ready(function () {
  $('#accordianSide h3').click(function(){
    if ($(this).attr('class') != 'activeAcc'){
      $('#accordianSide ul ul').slideUp();
      $(this).next().slideToggle();
      $('#accordianSide h3').removeClass('activeAcc');
      $(this).addClass('activeAcc');
    } else {
      $('#accordianSide ul ul').slideUp();
      $('#accordianSide h3').removeClass('activeAcc');
    }
  });
});