Question

我已经看过并尝试了其他讨论的几个建议，但我似乎无法让我的菜单正常工作。

我正在开发一个视差滚动网页，我有一个完美的移动下拉菜单，但是当你点击菜单项时我需要它来折叠菜单。

这是我的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 Version

我可以通过单击菜单标题打开和关闭下拉菜单，但我也需要在菜单项上。

Answer 1

我认为您需要使用input + label删除代码，并且只使用带有html元素的jQuery。

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

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

请检查小提琴中的所有代码： http://jsfiddle.net/y5aa1p61/

实际上，你也需要修复你的CSS。如果您使用它，请不要忘记检查代码之间的差异。

Answer 2

如果你想这样做，当你打开子菜单时你的UL正在扩展你可以用css作弊，然后像这样去

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

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

注意要隐藏的元素必须是要点击的元素的子元素，或者至少必须是元素本身并且通过该转换，您甚至可以获得结束动画

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

2 个答案: