單擊菜單子項時關閉下拉菜單

我已經看過並嘗試了其他討論中的幾條建議，但我似乎無法讓我的菜單正常工作。單擊菜單子項時關閉下拉菜單

我工作的視差滾動網頁，我有一個完美的作品在移動下拉菜單中，但我需要它摺疊菜單當您單擊菜單項。

這裏是我的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

我能夠打開和點擊關閉下拉菜單菜單標題，但我也需要它在菜單項上。

來源

2015-03-13 Trevor Griffith

我認爲你需要輸入+要刪除的標籤代碼，並且只使用jQuery的與HTML元素。

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

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

請檢查所有撥弄代碼：http://jsfiddle.net/y5aa1p61/

其實，你需要修正你的CSS了。如果您使用它，請不要忘記檢查代碼之間的差異。

來源

2015-03-13 19:15:02

完美！這正是我想要它做的。在付諸實施之前，我仍然需要清理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; 
}

注意要元素隱藏的方式必須是將被點擊的元素的一個孩子，或者至少是元素本身，並與過渡，你甚至會關閉動畫

來源

2015-03-13 19:25:57

單擊菜單子項時關閉下拉菜單

回答

相關問題