如何使用onclick函數打開子菜單並使用onclick函數隱藏

Question

我做了一個側邊欄導航，所以在鼠標懸停打開子菜單時就打開了，但我希望在單擊時打開它，在同一選項卡上單擊它來隱藏它。 請檢查我在此Codepen中的代碼謝謝。

<nav class="navigation">
  <ul class="mainmenu">
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Products</a>
      <ul class="submenu">
        <li><a href="">Tops</a></li>
        <li><a href="">Bottoms</a></li>
        <li><a href="">Footwear</a></li>
      </ul>
    </li>
      <li><a href="">Contact us</a></li>
  </ul>
</nav>

https://codepen.io/anon/pen/erNpYG

提前致謝。

Answer 1

您可以將隱藏的復選框與常規的同級組合器（ ~ ）結合使用，以在沒有javascript的情況下單擊以關閉並打開子菜單：

 html, body { font-family: Arial, Helvetica, sans-serif; } .navigation { width: 300px; } .mainmenu, .submenu { list-style: none; padding: 0; margin: 0; } .mainmenu a, .mainmenu label { display: block; background-color: #CCC; text-decoration: none; padding: 10px; color: #000; } .mainmenu a:hover, .mainmenu label:hover { background-color: #C5C5C5; } /* hide the input */ .mainmenu input { display: none; } /* if a sibling checkbox is check show the menu */ .mainmenu input:checked ~ .submenu { display: block; max-height: 200px; } .submenu a, .submenu label { background-color: #999; } .submenu a:hover { background-color: #666; } .submenu { overflow: hidden; max-height: 0; transition: all 0.5s ease-out; } 

 <nav class="navigation"> <ul class="mainmenu"> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><input type="checkbox" id="products"> <label for="products">Products</label> <ul class="submenu"> <li><a href="">Tops</a></li> <li><a href="">Bottoms</a></li> <li><a href="">Footwear</a></li> </ul> </li> <li><a href="">Contact us</a></li> </ul> </nav> 

Answer 2

我希望這能夠幫到你。 我添加了一些jQuery。 ID用於目標子菜單。 您也可以為其他人重復。 只需更改ID。 我也為about標簽創建了一個示例。 在單擊另一個選項卡后，另一個選項卡菜單將關閉。

 $('.dropdown').click(function () { var target_id = $(this).attr('data-toggle'); $('.dropdown-list').not(target_id).slideUp(); $(target_id).slideToggle(); $('.dropdown-list').not(target_id).parents('li, .icon-tab').removeClass('active'); $('.dropdown').not(this).parents(' .icon-tab').removeClass('active'); $(this).parents('li, .icon-tab').toggleClass('active'); }); 

 html, body { font-family: Arial, Helvetica, sans-serif; } /* define a fixed width for the entire menu */ .navigation { width: 300px; } /* reset our lists to remove bullet points and padding */ .mainmenu, .submenu { list-style: none; padding: 0; margin: 0; } /* make ALL links (main and submenu) have padding and background color */ .mainmenu a { display: block; background-color: #CCC; text-decoration: none; padding: 10px; color: #000; } /* add hover behaviour */ .mainmenu a:hover { background-color: #C5C5C5; } /* when hovering over a .mainmenu item, display the submenu inside it. we're changing the submenu's max-height from 0 to 200px; */ /* we now overwrite the background-color for .submenu links only. CSS reads down the page, so code at the bottom will overwrite the code at the top. */ .submenu a { background-color: #999; } /* hover behaviour for links inside .submenu */ .submenu a:hover { background-color: #666; } /* this is the initial state of all submenus. we set it to max-height: 0, and hide the overflowed content. */ .submenu { display:none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="navigation"> <ul class="mainmenu"> <li><a href="">Home</a></li> <li><a class="dropdown" data-toggle="#about">About</a> <ul class="submenu dropdown-list" id="about"> <li><a href="">Tops</a></li> <li><a href="">Bottoms</a></li> <li><a href="">Footwear</a></li> </ul> </li> <li><a class="dropdown" data-toggle="#products">Products</a> <ul class="submenu dropdown-list" id="products"> <li><a href="">Tops</a></li> <li><a href="">Bottoms</a></li> <li><a href="">Footwear</a></li> </ul> </li> <li><a href="">Contact us</a></li> </ul> </nav> 

Answer 3

嘗試使用js

 $(document).ready(function(){ $('.dropdown').each(function() { var $dropdown = $(this); $(".dropdown-link", $dropdown).click(function(e) { e.preventDefault(); $div = $(".submenu", $dropdown); $div.toggle(); $(".submenu").not($div).hide(); return false; }); }); $('html').click(function(){ $(".submenu").hide(); }); }); 

 html, body { font-family: Arial, Helvetica, sans-serif; } /* define a fixed width for the entire menu */ .navigation { width: 300px; } /* reset our lists to remove bullet points and padding */ .mainmenu, .submenu { list-style: none; padding: 0; margin: 0; } /* make ALL links (main and submenu) have padding and background color */ .mainmenu a { display: block; background-color: #CCC; text-decoration: none; padding: 10px; color: #000; } /* add hover behaviour */ .mainmenu a:hover { background-color: #C5C5C5; } /* when hovering over a .mainmenu item, display the submenu inside it. we're changing the submenu's max-height from 0 to 200px; */ /* we now overwrite the background-color for .submenu links only. CSS reads down the page, so code at the bottom will overwrite the code at the top. */ .submenu a { background-color: #999; } /* hover behaviour for links inside .submenu */ .submenu a:hover { background-color: #666; } /* this is the initial state of all submenus. we set it to max-height: 0, and hide the overflowed content. */ .submenu { overflow: hidden; display: none; -webkit-transition: all 0.5s ease-out; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="navigation"> <ul class="mainmenu"> <li><a href="">Home</a></li> <li class="dropdown"> <a href="#" class="dropdown-link">About</a> <ul class="submenu"> <li><a href="">Tops</a></li> <li><a href="">Bottoms</a></li> <li><a href="">Footwear</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-link">Products</a> <ul class="submenu"> <li><a href="">Tops</a></li> <li><a href="">Bottoms</a></li> <li><a href="">Footwear</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-link">Other dropdown</a> <ul class="submenu"> <li><a href="">Tops</a></li> <li><a href="">Bottoms</a></li> <li><a href="">Footwear</a></li> </ul> </li> <li><a href="">Contact us</a></li> </ul> </nav> 

Answer 4

這是使用純JS

的CSS

.subrollin{
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-in;
}
.subrollout{
  overflow: block;
  max-height: 200px;
  -webkit-transition: all 0.5s ease-out;
}

JS

var element = document.getElementsByClassName('parentmenu')[0];
element.addEventListener("click", function(e) {
var sub = document.getElementsByClassName('submenu')[0];
  if(sub.classList.contains('subrollout')){
      sub.classList.add("subrollin");    
      sub.classList.remove("subrollout");
  } else {
      sub.classList.add("subrollout");
      sub.classList.remove("subrollin");
  }
}, false);

看到這個codepen： https ：//codepen.io/anon/pen/gzpaer