Question

我正在为我的网站开发人员组合工作。我对Javascript和JQuery没有多少经验，但我试图找出最有效的方式来显示和隐藏导航菜单的下拉菜单。我的JQuery不起作用，我想知道是否有人有任何提示。此外，我计划在第一个UI中为所有乐器制作下拉列表。

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

Answer 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()"。您没有定义此功能，因此它只会在控制台中显示错误。

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

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

显示和隐藏多列下拉列表

3 个答案: