Question

所以我有一个下拉菜单，我想在开启/关闭时切换显示单击“+”字符和/或在父菜单项上悬停？

要求： 我面临的一个大问题是我需要它是动态的，所以当创建一个新的子下拉菜单时（在WordPress中）它会被显示（当悬停时/点击'+'。

问题：当我打开服务下拉菜单项时，所有子菜单都打开了吗？我想可能是这一行：

`.main-navigation .sub-menu {
        display: none;
}

 .sub-menu.toggle-on {
    display: block; 
 }`

//  var toggleOpenBtn = document.getElementsByClassName(".dropdown-toggle");

// toggleOpenBtn

$( ".dropdown-toggle" ).click(function() {
 
 $( ".sub-menu" ).toggleClass("toggle-on");

});

 /*
	# HEADER
 */
 *, html {
 	margin: 0;
 	font-size: 16px;
 }
 .site-header {
 	background-color: black;
 	padding: 1rem;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 }
 .main-navigation {
 	 	padding: 2rem;
 	 	background-color: red;
   }

/*.menu-toggle, .main-navigation ul ul, .main-navigation ul ul ul {
 	display: none;
 }
*/

.main-navigation .sub-menu {
		display: none;
}

 .sub-menu.toggle-on {
 	display: block;	
 }

 .main-navigation ul, .main-navigation ul ul, .main-navigation ul ul ul  {
 	list-style: none;
 }
 .main-navigation ul li a {
 	color: #fff;
 	text-decoration: none;
 }

/* First Highrarchy */
.main-navigation ul {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.main-navigation ul li  {
	margin-right: 2rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<header id="masthead" class="site-header">
  <div class="site-branding">
    <div class="site-branding-text">
      <p class="site-title"><a href="http://localhost/wordpress/" rel="home">LOGO</a></p>
    </div>
  </div>
  <!-- .site-branding -->

  <nav id="site-navigation" class="main-navigation">
    <button class="menu-toggle" aria-expanded="false">Primary Menu</button>
    <div class="menu-test-container">
      <ul id="primary-menu" class="menu" aria-expanded="true">
        <li id="menu-item-2035" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2035">
          <a href="http://localhost/wordpress/services/">Services</a>
          <button class="dropdown-toggle" aria-expanded="false">
							<span class="dropdown-symbol">+</span>
						</button>
          <ul class="sub-menu">
            <li id="menu-item-2076" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2076">
              <a href="http://localhost/wordpress/asd/">Commercial</a>
              <button class="dropdown-toggle toggled-on" aria-expanded="true">
									<span class="dropdown-symbol">-</span>
								</button>
              <ul class="sub-menu toggled-on">
                <li id="menu-item-2082" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2082">
                  <a href="http://localhost/wordpress/asd/">Rural</a>
                  <button class="dropdown-toggle toggled-on" aria-expanded="true">
											<span class="dropdown-symbol">-</span>
										</button>
                  <ul class="sub-menu toggled-on">
                    <li id="menu-item-2081" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2081">
                      <a href="http://localhost/wordpress/services/">Electrical</a>
                      <button class="dropdown-toggle" aria-expanded="false">
													<span class="dropdown-symbol">+</span>
												</button>
                      <ul class="sub-menu">
                        <li id="menu-item-2079" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2079">
                          <a href="http://localhost/wordpress/gallery/">Residential</a>
                          <button class="dropdown-toggle" aria-expanded="false">
															<span class="dropdown-symbol">+</span>
														</button>
                          <ul class="sub-menu">
                            <li id="menu-item-2083" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2083"><a href="http://localhost/wordpress/news-updates/">News Updates</a></li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li id="menu-item-2084" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2084">
          <a href="http://localhost/wordpress/asd/">Projects</a>
        </li>
        <li id="menu-item-2045" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2045">
          <a href="http://localhost/wordpress/blog/">Blog</a>
          <button class="dropdown-toggle" aria-expanded="false">
							<span class="dropdown-symbol">+</span>
						</button>
          <ul class="sub-menu">
            <li id="menu-item-2078" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2078">
              <a href="http://localhost/wordpress/news-updates/">About</a>
              <button class="dropdown-toggle" aria-expanded="false">
									<span class="dropdown-symbol">+</span>
								</button>
              <ul class="sub-menu">
                <li id="menu-item-2099" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2099">
                  <a href="http://localhost/wordpress/news-updates/">News Updates</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
  <!-- #site-navigation -->
  <link rel="stylesheet" type="text/css" href="style.css">
</header>

<body>

</body>

</html>

下拉菜单：所有嵌套子菜单一次打开？

0 个答案: