通過單擊下拉菜單

Question

對於我的漢堡菜單，我正在嘗試構建它，以使其通過單擊成為下拉菜單。 例如，如果按項目1旁邊的加號，則項目1的子項目將下拉。 我已將所有項目和子項目添加到漢堡菜單中。 但是，我無法弄清楚如何僅在按下父項旁邊的加號時才顯示子項。 有人有解決方案嗎？

jsfiddle- https: //jsfiddle.net/yz5p1czh/

 jQuery(document).ready(function() { jQuery('#hamburger-nav-icon').click(function() { jQuery(this).toggleClass('open'); jQuery('body').css('overflow','hidden'); if (jQuery('#hamburger-menu-cover').css('opacity') == '0') { jQuery('#hamburger-menu-cover').css('opacity', '1'); jQuery('#hamburger-menu-cover').fadeIn(300).css('display', 'table'); jQuery('body').css('overflow','hidden'); } else { jQuery('#hamburger-menu-cover').css('opacity', '0'); jQuery('#hamburger-menu-cover').fadeOut(300).css('display', 'none'); jQuery('body').css('overflow','visible'); } }); }); 

 /*-------------------------------------------------------------- ## Hamburger Menu --------------------------------------------------------------*/ #hamburger-menu-cover { z-index: 5; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); position: fixed; font-size: 1.5em; text-align: center; right: 0px; top: 0px; opacity: 0; display: none; overflow-y: hidden; -webkit-overflow-scrolling: touch; overflow: hidden; } .hamburger-menu { background:#fff; width: 31%; height: 100%; border-right: 1px solid #808080; position: fixed; top: 0px; } .hamburger-menu-container { margin-left: 73px; margin-top: 100px; padding-right: 32px; padding-bottom: 40px; border-bottom: 1px solid #808080; } .hamburger-menu-links li { list-style: none; font-family: 'freightlight'; font-size: 36px; display: block; line-height: 57px; font-style: italic; text-transform: uppercase; text-decoration: none; } .hamburger-menu-links li a { text-decoration: none; color:#000; } .hamburger-menu-links li a:hover { text-decoration: none; color:#000; } .hamburger-menu-links li a:active { text-decoration: none; color:#000; } .hamburger-menu-links li a:visited { text-decoration: none; color:#000; } #hamburger-nav-icon { z-index: 20; width: 50px; height: 35px; position: relative; margin: 35px 30px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; } #hamburger-nav-icon span { display: block; position: absolute; height: 5px; width: 40px; background: #000; opacity: 1; left: 0; } /* Icon 3 */ #hamburger-nav-icon span:nth-child(1) { top: 0px; } #hamburger-nav-icon span:nth-child(2),#hamburger-nav-icon span:nth-child(3) { top: 12px; } #hamburger-nav-icon span:nth-child(4) { top: 24px; } #hamburger-nav-icon.open span:nth-child(1) { top: 8px; width: 0%; left: 50%; } #hamburger-nav-icon.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #hamburger-nav-icon.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #hamburger-nav-icon.open span:nth-child(4) { top: 8px; width: 0%; left: 50%; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="hamburger-nav-icon"> <span></span> <span></span> <span></span> <span></span> </div> <div id="hamburger-menu-cover"> <div class="hamburger-menu"> <div class="hamburger-menu-container"> <div class="hamburger-menu-links"> <ul> <li><a href="#">Item 1<i class="fa fa-plus" aria-hidden="true"></i></a></li> <div class="submenu"> <li><a href="#">Sub Item 1</a></li> <li><a href="#">Sub Item 2</a></li> </div> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5<i class="fa fa-plus" aria-hidden="true"></i></a></li> <div class="submenu"> <li><a href="#">Sub Item 1</a></li> <li><a href="#">Sub Item 2</a></li> </div> <li><a href="#">Item 6</a></li> <li><a href="#">Item 7</a></li> <li><a href="#">Item 8</a></li> <li><a href="#">Item 9</a></li> </ul> </div> </div> </div> </div> 

Answer 1

試試這個： https : //jsfiddle.net/yz5p1czh/8/

HTML

<div id="hamburger-nav-icon">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
<div id="hamburger-menu-cover">
<div class="hamburger-menu">
  <div class="hamburger-menu-container">
     <div class="hamburger-menu-links">
       <ul>
          <li><a href="#">Item 1<i class="fa fa-plus menutoggle" id="toggle1" aria-hidden="true"></i></a></li>
            <div class="submenu" id="submenu1">
               <li><a href="#">Sub Item 1</a></li>
               <li><a href="#">Sub Item 2</a></li>
            </div>
          <li><a href="#">Item 3</a></li>
          <li><a href="#">Item 4</a></li>
          <li><a href="#">Item 5<i class="fa fa-plus menutoggle" id="toggle5" aria-hidden="true"></i></a></li>
            <div class="submenu" id="submenu5">
             <li><a href="#">Sub Item 1</a></li>
             <li><a href="#">Sub Item 2</a></li>
            </div>
          <li><a href="#">Item 6</a></li>
          <li><a href="#">Item 7</a></li>
          <li><a href="#">Item 8</a></li>
          <li><a href="#">Item 9</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

jQuery的：

jQuery(document).ready(function() {
   $(".submenu").slideUp("fast");
   $(".menutoggle").click(function(){
     var id = $(this).attr("id").replace("toggle","submenu");
     $("#" + id).slideToggle("fast");   
   });

  jQuery('#hamburger-nav-icon').click(function() {
    jQuery(this).toggleClass('open');
    jQuery('body').css('overflow','hidden');  
    if (jQuery('#hamburger-menu-cover').css('opacity') == '0') {
      jQuery('#hamburger-menu-cover').css('opacity', '1');
      jQuery('#hamburger-menu-cover').fadeIn(300).css('display', 'table'); 
        jQuery('body').css('overflow','hidden');
    } else {
        jQuery('#hamburger-menu-cover').css('opacity', '0');
        jQuery('#hamburger-menu-cover').fadeOut(300).css('display', 'none');
        jQuery('body').css('overflow','visible');
    }
  });
});

Answer 2

你需要那樣的東西嗎？ https://jsfiddle.net/yz5p1czh/7/我向圖標添加了一個open類，該類觸發了一個jQuery函數，該函數在子菜單div中逐漸消失。

Answer 3

我已將您的sub-items移至li > ul 。 此外，您的舊sub-items現在也具有aria-hidden屬性。

已添加的CSS控制sub-items可見性。

.hamburger-menu-links ul[aria-hidden="true"] {
  display: none;
}

.hamburger-menu-links ul[aria-hidden="false"] {
  display: block;
}

已添加的JS代碼會將aria-hidden在ul子項目之間。

$('.hamburger-menu-links li').click(function(e) {
  var ul = $(this).find('ul');

  var ariaHidden = ul.attr('aria-hidden');
  var value = (ariaHidden === 'true') || false;

  ul.attr('aria-hidden', !value);
});

這是工作示例。

 jQuery(document).ready(function() { jQuery('#hamburger-nav-icon').click(function() { jQuery(this).toggleClass('open'); jQuery('body').css('overflow','hidden'); if (jQuery('#hamburger-menu-cover').css('opacity') == '0') { jQuery('#hamburger-menu-cover').css('opacity', '1'); jQuery('#hamburger-menu-cover').fadeIn(300).css('display', 'table'); jQuery('body').css('overflow','hidden'); } else { jQuery('#hamburger-menu-cover').css('opacity', '0'); jQuery('#hamburger-menu-cover').fadeOut(300).css('display', 'none'); jQuery('body').css('overflow','visible'); } }); }); // new $('.hamburger-menu-links li').click(function(e) { var ul = $(this).find('ul'); var ariaHidden = ul.attr('aria-hidden'); var value = (ariaHidden === 'true') || false; ul.attr('aria-hidden', !value); }); 

 /*-------------------------------------------------------------- ## Hamburger Menu --------------------------------------------------------------*/ #hamburger-menu-cover { z-index: 5; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); position: fixed; font-size: 1.5em; text-align: center; right: 0px; top: 0px; opacity: 0; display: none; overflow-y: hidden; -webkit-overflow-scrolling: touch; overflow: hidden; } .hamburger-menu { background:#fff; width: 31%; height: 100%; border-right: 1px solid #808080; position: fixed; top: 0px; } .hamburger-menu-container { margin-left: 73px; margin-top: 100px; padding-right: 32px; padding-bottom: 40px; border-bottom: 1px solid #808080; } .hamburger-menu-links li { list-style: none; font-family: 'freightlight'; font-size: 36px; display: block; line-height: 57px; font-style: italic; text-transform: uppercase; text-decoration: none; } .hamburger-menu-links li a { text-decoration: none; color:#000; } .hamburger-menu-links li a:hover { text-decoration: none; color:#000; } .hamburger-menu-links li a:active { text-decoration: none; color:#000; } .hamburger-menu-links li a:visited { text-decoration: none; color:#000; } .hamburger-menu-links ul[aria-hidden="true"] { display: none; } .hamburger-menu-links ul[aria-hidden="false"] { display: block; } #hamburger-nav-icon { z-index: 20; width: 50px; height: 35px; position: relative; margin: 35px 30px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; } #hamburger-nav-icon span { display: block; position: absolute; height: 5px; width: 40px; background: #000; opacity: 1; left: 0; } /* Icon 3 */ #hamburger-nav-icon span:nth-child(1) { top: 0px; } #hamburger-nav-icon span:nth-child(2),#hamburger-nav-icon span:nth-child(3) { top: 12px; } #hamburger-nav-icon span:nth-child(4) { top: 24px; } #hamburger-nav-icon.open span:nth-child(1) { top: 8px; width: 0%; left: 50%; } #hamburger-nav-icon.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #hamburger-nav-icon.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #hamburger-nav-icon.open span:nth-child(4) { top: 8px; width: 0%; left: 50%; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="hamburger-nav-icon"> <span></span> <span></span> <span></span> <span></span> </div> <div id="hamburger-menu-cover"> <div class="hamburger-menu"> <div class="hamburger-menu-container"> <div class="hamburger-menu-links"> <ul> <li> <a href="#">Item 1<i class="fa fa-plus"></i></a> <ul aria-hidden="true"> <li> <a href="#">Sub Item 1</a> </li> <li> <a href="#">Sub Item 2</a> </li> </ul> </li> <li> <a href="#">Item 2<i class="fa fa-plus"></i></a> <ul aria-hidden="false"> <li> <a href="#">Sub Item 1</a> </li> <li> <a href="#">Sub Item 2</a> </li> </ul> </li> <li> <a href="#">Item 3</a> </li> <li> <a href="#">Item 4</a> </li> <li> <a href="#">Item 5<i class="fa fa-plus"></i></a> <ul aria-hidden="true"> <li> <a href="#">Sub Item 1</a> </li> <li> <a href="#">Sub Item 2</a> </li> </ul> </li> <li> <a href="#">Item 6</a> </li> <li> <a href="#">Item 7</a> </li> <li> <a href="#">Item 8</a> </li> <li> <a href="#">Item 9</a> </li> </ul> </div> </div> </div> </div>