Question

这里已多次询问过，但我找不到一个可理解的代码解决方案。

我想创建一个移动显示/隐藏下拉菜单。

我的代码如下：

<div>
   <a href="">Click this Link to collapse the subitems</a>
      <ul class="submenu">
         <li class="subitem">1</li>
         <li class="subitem">2</li>
         <li class="subitem">3</li>
         <li class="subitem">4</li>
      </ul>
   <a href="">Click this Link to collapse the subitems</a>
      <ul class="submenu">
         <li class="subitem">1</li>
         <li class="subitem">2</li>
         <li class="subitem">3</li>
         <li class="subitem">4</li>
      </ul>
   <a href="">Click this Link to collapse the subitems</a>
      <ul class="submenu">
         <li class="subitem">1</li>
         <li class="subitem">2</li>
         <li class="subitem">3</li>
         <li class="subitem">4</li>
      </ul>
</div>

子项目应隐藏。当我点击a-Tag（“点击此链接...”）时，下面的子项目将显示。请给我一个解决方案，而不是交替使用代码本身 - 这是否可能？只有被点击的-Link的子项才会崩溃。

任何帮助？

Answer 1

Demo

添加js：

$('div a').click(function(){
    $('.submenu').slideUp();
    $(this).next().slideDown();
});

Answer 2

$(div > a).on('click', function() {
  var child = $(this).child('ul.submenu');

  if ($(child).is(':hidden')) {
    $(child).show();
  }
  else {
    $(child).hide();
  }
});

Answer 3

工作解决方案：http://jsfiddle.net/avi_sagi/CfqGG/211/

Jquery的：

$(document).ready(function () {
   $(".collapse").parent().find(".subitem").hide();
   $(".collapse").on('click', function () {
       $(this).parent().find(".subitem").slideToggle();
   });
});

HTML： - 将容器（.list-group）添加到每个子菜单组，以便parent（）方法定位其组中唯一的列表项。

<div class="wrapper"> 
    <div class="list-group">
        <a class="collapse" href="javascript:void(0)">Click this Link to collapse the subitems</a>
        <ul class="submenu">
            <li class="subitem">1</li>
            <li class="subitem">2</li>
            <li class="subitem">3</li>
            <li class="subitem">4</li>
        </ul>
    </div>
    <div class="list-group">
        <a class="collapse" href="javascript:void(0)">Click this Link to collapse the subitems</a>
        <ul class="submenu">
        <li class="subitem">1</li>
        <li class="subitem">2</li>
        <li class="subitem">3</li>
        <li class="subitem">4</li>
        </ul>
    </div>
    <div class="list-group">
        <a class="collapse" href="javascript:void(0)">Click this Link to collapse the subitems</a>
        <ul class="submenu">
            <li class="subitem">1</li>
            <li class="subitem">2</li>
            <li class="subitem">3</li>
            <li class="subitem">4</li>
        </ul>
    </div>
</div>

使用javascript创建下拉菜单

3 个答案: