显示和隐藏多列下拉菜单答案

【问题标题】：Showing and hiding multi-column-dropdowns显示和隐藏多列下拉菜单
【发布时间】：2017-07-15 21:31:34
【问题描述】：

我正在为我的网络开发人员组合开发一个模拟网站。我对 Javascript 和 JQuery 没有太多经验，但我正在尝试找出最有效的方式来显示和隐藏导航菜单的下拉菜单。我的 JQuery 不工作，我想知道是否有人有任何提示。另外，我确实计划为第一个 Ul 中的所有乐器制作下拉菜单。

HTML：

<body>
 <div class="container-fluid">
  <div  id="main-page">
    <ul id="main-menu">
      <li class="main-menu-list-items" style="border: 1px solid black;">
       <div class="dropdown">
        <ul>
         <li><a href="#" onclick="myFunction()" class="drop">Products</a></li> 
         <div id="myDropdown" class="dropdown-content">
          <ul>
           <li class="dropdown-submenu"><a onclick="myClarinetDrop()" class="clarinet-drop" href="#">Clarinet</a>
            <div id="my-clarinet-dropdown" class="dropdown-content">
             <ul>
              <li><a href="#">Bb Clarinet</a></li>
              <li><a href="#">Bb Bass Clarinet</a></li>
              <li><a href="#">Eb Clarinet</a></li>
              <li><a href="#">Alto Clarinet</a></li>
              <li><a href="#">Bb German Clarinet</a></li>
              <li><a href="#">Bb Contrabass Clarinet</a></li>
             </ul>
            </li>
            <li><a href="#">Saxophone</a></li>
            <li><a href="#">Flute</a></li>
            <li><a href="#">Bassoon</a></li>
            <li><a href="#">Recorder</a></li>
            <li><a href="#">Brass</a></li>
            <li><a href="#">Guitar</a></li>
            <li><a href="#">Piano</a></li>
            <li><a href="#">Orchestral</a></li>
            <li><a href="#">Percussion</a></li>
           </div><!--closes "myDropdown"-->
          </ul>
        </div><!--closes dropdown-->
       </li>
       <li class="main-menu-list-items"style="border: 1px solid black;">
         <span>Shop By Brands</span> 
       </li>
       <li class="main-menu-list-items" style="border: 1px solid black;">
         <span>How To Order</span>
       </li>
       <li class="main-menu-list-items" style="border: 1px solid black;">
         <span>Quick Order</span>
       </li>
       <li class="main-menu-list-items" style="border: 1px solid black;">
         <span>About Us</span>    
       </li>
     </ul><!--closes "main-menu"-->
    </div><!--closes "main-page"-->
  </div><!--closes "container-fluid"-->
</body>

CSS：

body {
  margin:0;
  padding:0;
}

.main-menu-list-items {
  list-style-type:none;/*removes bullet point*/
  float:left;/*puts list items side by side -- with no spaces*/
  padding:15px 75px;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown >ul {
  margin-left:-40px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display:none;
    position: absolute;
    min-width: 1154px;
    border:1px solid black;
    margin-left:-76px;
    margin-top:15px;
    height:50px;
    list-style-type:none;
}
.dropdown-content > ul {
  list-style-type:none;
}
.dropdown-content >ul >li {
    position:relative;
    float:left;
    padding:15px 29px;

}
.dropdown-submenu > div > ul > li {
  position:relative;
  float:left;
  padding:15px 52px 0 30px;
}

.dropdown-submenu > div > ul {
  border:1px solid black;
  height:50px;
  margin-left:-70px;
  bottom:-54px;
  min-width: 1114px;
  position:absolute;
  list-style-type:none;
  display:none;

}

/* 显示下拉菜单（当用户点击下拉按钮时，使用 JS 将此类添加到 .dropdown-content 容器中） */ .show {display:block;}

jQuery:

$(' .main-menu-list-items > .dropdown').click(function() {
  var submenu = $(this).children('.dropdown > ul');
 if($('.dropdown-content').css('display') == 'none') {
   $(submenu).show();
  }
  else {
    $(submenu).hide();
  }
});

【问题讨论】：

标签： javascript jquery drop-down-menu

【解决方案1】：

如果你想打开一个子菜单，添加一个类就足够了。然后，您可以通过添加另一个 CSS 规则来显示子元素 (.dropdown-content)。如果删除该类，子节点将再次隐藏。我已经重写了你的代码并改进了它的目的：

$('.main-menu-list-items > .dropdown').click(function() {
    var $this = $(this); // performance, so we do not have to call $(this) multiple times
    if(!$this.hasClass('show')) { 
        $this.addClass('show');
    } else {
        $this.removeClass('show');
    }    
});

然后将其添加到您的 CSS 中。这是因为你之前在 CSS 中隐藏了这个元素：

.show .dropdown-content {
    display: block;
}

附带说明：删除 onclick="myFunction()"。你没有定义这个函数，所以它只会在控制台中给你错误。

【讨论】：

【解决方案2】：

您可能想要修复的第一件事是您的 HTML。 ul 唯一允许的直接后代是 li，请删除 div。此外，您的 HTML 中有一些实例，您的右括号位于错误的位置，从而创建了无效的 HTML。

这是一个简单的菜单格式，但您必须重做 CSS 才能使用它：

<nav>
  <ul>
    <li class="dropdown">
      <a href="#" >Products</a>
      <ul class="sub-menu">
        <li class="dropdown">
          <a href="#">Clarinet</a>
          <ul class="sub-menu">
            <li><a href="#">Bb Clarinet</a></li>
            <li><a href="#">Bb Bass Clarinet</a></li>
            <li><a href="#">Eb Clarinet</a></li>
            <li><a href="#">Alto Clarinet</a></li>
            <li><a href="#">Bb German Clarinet</a></li>
            <li><a href="#">Bb Contrabass Clarinet</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Saxophone</a>
        </li>
        <li>
          <a href="#">Flute</a>
        </li>
        <li>
          <a href="#">Bassoon</a>
        </li>
        <li>
          <a href="#">Recorder</a>
        </li>
        <li>
          <a href="#">Brass</a>
        </li>
        <li>
          <a href="#">Guitar</a>
        </li>
        <li>
          <a href="#">Paino</a>
        </li>
        <li>
          <a href="#">Orchestral</a>
        </li>
        <li>
          <a href="#">Percussion</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Shop By Brands</a>  
    </li>
    <li>
      <a href="#">How to Order</a> 
    </li>
    <li>
      <a href="#">Quick Order</a> 
    </li>
    <li>
      <a href="#">About Us</a> 
    </li>
  </ul>
</nav>

然后，要显示子菜单，无论嵌套多少次，您都可以执行以下操作：

$('.dropdown').on('click', function() {
  $(this).children('.sub-menu').toggleClass('hideSubMenu');
});

【讨论】：

【解决方案3】：

感谢所有帮助我解决这个问题的人！

我完全重新编写了我的 HTML，因为我意识到存在大量错误。

HTML：

<nav>
  <ul id="main-bar">
    <li class="dropdown">
      <a href="#">Product</a>
      <!--sub-menu will hold all contents in dropdown --list items-->
      <ul id="product-bar" class="sub-menu">
        <li><a href="#">Clarinet</a></li>
        <li><a href="#">Saxophone</a></li>
        <li><a href="#">Flute</a></li>
        <li><a href="#">Bassoon</a></li>
        <li><a href="#">Recorder</a></li>
        <li><a href="#">Brass</a></li>
        <li><a href="#">Guitar</a></li>
        <li><a href="#">Piano</a></li>
        <li><a href="#">Orchestral</a></li>
        <li><a href="#">Percussion</a></li>
      </ul><!--closes product-bar-->
    </li><!--closes product list item that is holding all the products-->
    <li><a href="#">Shop By Brands</a></li>
    <li><a href="#">How to Order</a></li>
    <li><a href="#">Quick Order</a></li>
    <li><a href="#">About Us</a></li>  
  </ul><!--closes main-bar-->
</nav>

我也重新做了 CSS：

body {
  margin:0;
  padding:0;
}

#main-bar {
  list-style-type:none;/*removes bullets*/
  height:50px;/*sets height of main-bar to same height as li's in #main-bar*/
}

#main-bar > li {
  float:left;/*puts list items next to each other*/
  border:1px solid black;
  padding:15px 80px;
}

#main-bar > li > a {
  text-decoration:none;/*removes underline from link*/
}

#product-bar {
    position: absolute;
    min-width: 1154px
    border:1px solid black;
    margin-left:-81px;
    margin-top:15px;
    height:50px;
    list-style-type:none;
    display:none
}

#product-bar > li {
  float:left; 
  padding:15px 30px;
}

#product-bar > li > a {
  text-decoration:none;
}

.show #product-bar {
  display:block;
}

最后，我为 JQuery 采用了这种方法

JQuery:

$('.dropdown').on('click', function() {

 var $this = $(this);times
    if(!$this.hasClass('show')) { 
        $this.addClass('show');
    } else {
        $this.removeClass('show');
    }    
});

【讨论】：