单击菜单子项时关闭下拉菜单

问题描述：

我已经看过并尝试了其他讨论中的几条建议，但我似乎无法让我的菜单正常工作。单击菜单子项时关闭下拉菜单

我工作的视差滚动网页，我有一个完美的作品在移动下拉菜单中，但我需要它折叠菜单当您单击菜单项。

这里是我的HTML：

<nav id="parallax-menu"> 
    <label for="show-menu" class="show-menu"><span class="icon-menu"></span></label> 
    <input type="checkbox" id="show-menu" role="button"> 
    <ul id="menu"> 
      <li><a href="#slide1">Solutions</a></li> 
        <li><a href="#slide3">Career-Readiness</a></li> 
        <li><a href="#slide5">Community</a></li> 
        <li><a href="#slide7">Professors</a></li> 
        <li><a href="#slide9">Value</a></li> 
       <li><a href="#slide11">Future</a></li> 
     </ul> 
    </nav>

这里是我的CSS：

body { 
    background: red; 
} 

/*Mobile menu icon*/ 
.icon-menu{font-size:30px} 
#parallax-menu{ 
    width: 100%; 
    background-color: rgba(0,0,0,0.4); 
    border-right: none; 
    float: left; 
} 
/*Strip the ul of padding and list styling*/ 
#parallax-menu ul { 
    display:table; 
    overflow: hidden; 
    margin: 0 auto; 
    padding: 0; 
    align-content: center; 
} 

/*Create a horizontal list with spacing*/ 
#parallax-menu ul li { 
list-style: none; 
    float: left; 
    text-align: center; 
    box-sizing: border-box; 
} 

/*Style for menu links*/ 
#parallax-menu ul li a { 
    display: block; 
    text-decoration: none; 
    padding: 10px 0; 
    line-height: 30px; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 15px; 
    color: #fff; 
    text-decoration: none; 
    padding-left: 20px; 
    padding-right: 20px; 
} 

/*Hover state for top level links*/ 
#parallax-menu li:hover a { 
    background: #fcad26; 
    -webkit-transition: all .5s .05s; 
    -moz-transition: all .5s .05s; 
    -o-transition: all .5s .05s; 
    transition: all .5s .05s; 
    color: #000; 
} 

/*Style for dropdown links*/ 
#parallax-menu li:hover ul a { 
    background: #fcad26; 
    color: #2f3036; 
    height: 40px; 
    line-height: 40px; 
} 

#parallax-menu ul li:first-child { 
    border-left: none; 
    padding-left: 0px; 
} 
#parallax-menu ul li:last-child { 
    padding-right: 0px; 
} 

/*Hover state for dropdown links*/ 
#parallax-menu li:hover ul a:hover { 
    background: #fcad26; 
    color: #fff; 
} 

/*Hide dropdown links until they are needed*/ 
#parallax-menu li ul { 
    display: none; 
} 

/*Make dropdown links vertical*/ 
#parallax-menu li ul li { 
    display: block; 
    float: none; 
} 

/*Prevent text wrapping*/ 
#parallax-menu li ul li a { 
    width: auto; 
    min-width: 100px; 
    padding: 0 20px; 
} 

/*Display the dropdown on hover*/ 
#parallax-menu ul li a:hover + .hidden, .hidden:hover { 
    display: block; 
} 

/*Style 'show menu' label button and hide it by default*/ 
.show-menu { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    text-decoration: none; 
    color: #fff; 
    background: #19c589; 
    text-align: center; 
    padding: 10px 0; 
    display: none; 
} 

/*Hide checkbox*/ 
input[type=checkbox]{ 
    display: none; 
} 

/*Show menu when invisible checkbox is checked*/ 
input[type=checkbox]:checked ~ #menu{ 
    display: block; 
} 

/*Responsive Styles*/ 

@media screen and (max-width : 760px){ 
    /*Make dropdown links appear inline*/ 
    #parallax-menu ul { 
     position: static; 
     display: none; 
    } 
    /*Create vertical spacing*/ 
#parallax-menu li { 
     margin-bottom: 1px; 
    } 
    /*Make all menu links full width*/ 
#parallax-menu ul li, li a { 
     width: 100%; 
    } 

    /*Display 'show menu' link*/ 
    .show-menu { 
     display:block; 
    } 
}

工作CodePen： CodePen Version

我能够打开和点击关闭下拉菜单菜单标题，但我也需要它在菜单项上。

答

我认为你需要输入+要删除的标签代码，并且只使用jQuery的与HTML元素。

$('.show-menu').on('click', function() { 
    $('#menu').toggleClass('active'); 
}); 

$('#menu a').on('click', function() { 
    $('#menu').removeClass('active'); 
});

请检查所有拨弄代码：http://jsfiddle.net/y5aa1p61/

其实，你需要修正你的CSS了。如果您使用它，请不要忘记检查代码之间的差异。

完美！这正是我想要它做的。在付诸实施之前，我仍然需要清理CSS。我今天迅速将它们扔在一起，试图找出下拉菜单。单独的问题虽然：我具有相同的页面上的两个NAV菜单和我选择与该ID标记（

你只能使用班级，为什么你需要ID？这是jQuery，你可以选择你想要的元素:)在今天的CSS中，每个人都使用类，ID是用于其他一些东西。 – 2015-03-13 22:29:19

答

如果你想这样做的，你的UL正在扩大，当你打开子菜单，你可以骗一点点CSS和再这样下去

#element{ 
height:100px; 
transition:0.5s; 
} 

#subMenuUL:active #element{ 
height:0; 
}

注意要元素隐藏的方式必须是将被点击的元素的一个孩子，或者至少是元素本身，并与过渡，你甚至会关闭动画

单击菜单子项时关闭下拉菜单

相关推荐