點擊下拉菜單中的鏈接關閉下拉菜單不會去鏈接

Question

我想創建一個響應下拉菜單。除了嘗試選擇其中一個菜單鏈接時，菜單完美工作。點擊鏈接會關閉菜單，但不會打開您剛剛保留在當前頁面上的鏈接。

我的jQuery來打開菜單：

$('.menu-button').click(function(){ 
    $('nav').addClass('active'); 
}); 

相關CSS：

@media only screen and (max-width:760px) { 
.active{ 
    text-align:center; 
} 

.active ul{ 
    border:1px solid #ccc; 
    margin-top:40px; 
    display:block; 
    width:100%; 
} 

.active ul li { 
    border:1px solid #ccc; 
    margin:0; 
    width:100%; 
    height:40px; 
    line-height:40px; 
} 
.active ul li a { 
    display:block; 
} 

.active a:hover { 
    background-color:#ecf1fc; 
    color:#020202; 
    top:0; 
} 
} 

你可以在www.teal.indiancreekboulderingclub.com.

我剛學的jQuery檢查出現場，所以請保持javascript解釋初級。預先感謝您的幫助。

Answer 1

檢查你的CSS我注意到了這一點：

@media only screen and (max-width: 760px) { 
    nav ul, nav:active ul { 
     display: none; 
    } 
} 

修改成：

@media only screen and (max-width: 760px) { 
    nav ul { 
     display: none; 
    } 
} 

你的jQuery似乎運作良好。但是你可以將其更改爲：

jQuery(document).ready(function($) { 
    $('.menu-button').click(function(){ 
     $('nav').toggleClass('active'); 
    }); 
}); 

這將允許用戶顯示和隱藏的導航。

Answer 2

您需要將'active'類移動到ul標記而不是nav標記。

site.js，更改爲：

jQuery(document).ready(function($) { 
    $('.menu-button').click(function(){ 
     $('nav ul').toggleClass('active'); 
    }); 
}); 

的style.css，在線296：

@media only screen and (max-width: 760px) { 

    ul.active { 
     border:1px solid #ccc; 
     margin-top:40px; 
     display:block; 
     width:100%; 
     padding-left: 0; 
     list-style: none; 
    } 

    ul.active li { 
     border: 1px solid #ccc; 
     margin:0; 
     width: 100%; 
     height:40px; 
     line-height:40px;  
     border-left: 0; 
     border-right: 0; 
    } 

    ul.active li a { 
     display:block; 
    } 

    ul.active a:hover { 
     background-color:#ecf1fc; 
     color:#020202; 
     top:0; 
    } 
}