使用 javascript 创建下拉菜单答案

【问题标题】：Create dropdown-menu with javascript使用 javascript 创建下拉菜单
【发布时间】：2014-05-11 19:40:47
【问题描述】：

这已经在这里问过很多次了，但我找不到我的代码可以理解的解决方案。

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

我的代码如下：

<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 的子项才会折叠。

有什么帮助吗？

【问题讨论】：

java 脚本？还是JavaScript？ javascript 不是 java！

标签： javascript css list navigation

【解决方案1】：

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

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

【讨论】：

因此赞成...（？）我忍不住要评论这个。问题不在于jQuery。 child 是什么方法，选择器 $(div > a) 是什么，以及为什么在元素对象 $(child) 中再次包装一个 jQuery 选择器，这是无用的开销。您也可以将布尔参数传递给 jQuery 的 .toggle() 方法 ...

【解决方案2】：

Demo

添加js：

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

【讨论】：

嗨。问题不在于 jQuery，（建议很好，但是）你能在JavaScript 中展示如何做到这一点吗？ $('div a') 也是一个模糊的选择器，也许暗示了别的东西？

【解决方案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：- 为 parent() 方法添加容器（.list-group）到每个子菜单组，以定位其组中唯一的列表项。

<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>

【讨论】：