点击下拉菜单

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类到图标，该图标触发了子菜单div中淡入淡出的jquery函数。

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代码，添加了对ul子项目切换aria-hidden。

$('.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>