Question

我有一个手风琴菜单，当你点击“活动”标签时，它不会自动折叠回来。如果单击任何其他选项卡，则上一个活动选项卡将折叠为正确...

我真的看不出有什么问题，我认为是jQuery函数。

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

非常感谢任何帮助

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');
    }
  });
});

jQuery手风琴菜单折叠

1 个答案: