不要费心重新发明轮子：

Question

我正在使用jquery创建一个简单的脚本，当用户点击它向下滑动的链接时。当我点击其他列表向下滑动时，如何自动关闭/滑动已经展开的其他列表。

即当一个滑块向下滑动时，如果任何其他可能打开的滑块应向上滑动。有人可以一步一步地告诉我如何做到这一点？

感谢

  $(document).ready(function() {
  $('.menu ul').hide();
  $('.menu .arrowUp').click(function() {
  $(this).find(".third-level").toggle();
  });
});

<ul class="menu">
<li class="arrowUp"><a href="#">link1</a>
    <ul class="third-level" >             
    <!-- third level non-active -->
     <li class="arrowUp"><a href="/view/page/bache/16425">Some Link</a></li>
    </ul>
</li>
<li class="arrowUp"><a href="#">link2</a>
    <ul class="third-level" >             
    <!-- third level non-active -->
     <li class="arrowUp"><a href="/view/page/bache/16425">some Links 2</a></li>
    </ul>
 </li>
<li class="arrowUp"><a href="#">link3</a>
                                    <ul class="third-level" >
                                      <!-- third level non-active -->
                                      <li class="arrowUp"><a href="/view/page/bache/16417">Agricultural Commodities</a></li>
                                        <!-- third level non-active -->
                                      <li class="arrowUp"><a href="/view/page/bache/16418">Sugar</a></li>
                                     <!-- third level non-active -->
                                      <li class="arrowUp"><a href="/view/page/bache/16419">Coffee</a></li>
                                      <!-- third level non-active -->
                                      <li class="arrowUp"><a href="/view/page/bache/16420">Energy</a></li>
                                      <!-- third level non-active -->
                                      <li class="arrowUp"><a href="/view/page/bache/16421">Financials</a></li>
                                    </ul>
</li>
<li class="arrowUp"><a href="#">link4</a></li>
<li class="arrowUp"><a href="#">link5</a></li>
<li class="arrowUp"><a href="#">link6</a></li>
</ul>

Answer 1

我知道我刚评论过，但我也可以发帖回答：

不要费心重新发明轮子：

您可以使用jQuery UI accordion。

Answer 2

你需要在切换想要的那个之前再次隐藏它们

$(document).ready(function() {
  $('.menu ul').hide();
  $('.menu .arrowUp').click(function() {
      $('.menu ul').hide();
      $(this).find(".third-level").toggle();
  });
});

Jquery菜单创建问题

2 个答案:

不要费心重新发明轮子：