显示和隐藏多列下拉列表

我正在为我的Web开发人员组合模拟网站。我对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内容容器）*/ .show {显示：块;}

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

来源

2017-07-15 agriffin

如果你想打开一个子菜单，它应该足以添加一个类。然后可以通过添加另一个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()"。你没有定义这个函数，所以它只会给你在控制台中的错误。

来源

2017-07-15 22:38:57 Zomry

您可能想要解决的第一件事是您的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'); 
});

来源

2017-07-15 22:42:36

谢谢所有帮助我这个问题！

我完全重新做了我的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'); 
    }  
});

来源

2017-07-16 01:14:52 agriffin

显示和隐藏多列下拉列表

回答

相关问题