製作鏈接後下拉菜單消失，已被選定

我有一個下拉菜單下面的代碼：製作鏈接後下拉菜單消失，已被選定

<header> 
     <nav class="navbar"> 
      <div class="inner-wrapper"> 
       <a class="button" id="menu-button">Menu</a> 
       <ul> 
       <li><a href="#about">About</a></li> 
       <li><a href="#classes">Classes</a></li> 
       <li><a href="#contact">Contact</a></li> 
       </ul> 
      </div> 
     </nav> 
</header> 

header nav div ul { 
    list-style: none; 
    padding: 0; 
    line-height: 1.75; 
    background-color: rgba(255, 255, 255, 0.6); 
    margin-top: 5px; 
    overflow: hidden; 
    height: auto; 
    display: none; 
} 

header nav div ul.menu-open { 
    display: block; 
} 

$(".button").click(function() { 
    $("header nav div ul").animate({ 
    opacity: 1, 
    height: "toggle" 
    }, 300, function() { 
    $("header nav div ul").toggleClass("menu-open"); 
    }); 
});

所以，當用戶點擊該按鈕就會切換這將打開菜單的類。該菜單目前用於單頁網站，所以我也有一個平滑的滾動腳本工作。在用戶做出選擇後，如何使菜單消失，就像菜單在選擇後消失並將其帶到右側部分一樣。

謝謝！

來源

2017-08-25 Lucy S.

你可以嘗試做這樣的事情：

我加入了類鋰選項的「LIS一個」標籤，然後創建一個的onclick功能此類。

<header> 
    <nav class="navbar"> 
     <div class="inner-wrapper"> 
      <a class="button" id="menu-button">Menu</a> 
      <ul> 
      <li><a href="#about" class="li-option">About</a></li> 
      <li><a href="#classes" class="li-option">Classes</a></li> 
      <li><a href="#contact" class="li-option">Contact</a></li> 
      </ul> 
     </div> 
    </nav> 
</header> 

<script> 
header nav div ul { 
    list-style: none; 
    padding: 0; 
    line-height: 1.75; 
    background-color: rgba(255, 255, 255, 0.6); 
    margin-top: 5px; 
    overflow: hidden; 
    height: auto; 
    display: none; 
} 

header nav div ul.menu-open { 
    display: block; 
} 

$(".button").click(function() { 
    $("header nav div ul").animate({ 
    opacity: 1, 
    height: "toggle" 
    }, 300, function() { 
    $("header nav div ul").toggleClass("menu-open"); 
    }); 
}); 

$(".li-option").click(function() { 
    $("#menu-button").css('display', 'none'); 
});

來源

2017-08-25 20:43:45

是這方面的工作？ –

它應該。但我沒有他的.css文件，所以我不能確定。露西S.應該回答。 –

如果你甚至不確定，你怎麼回答。向下投票，因爲你的回答是不給出輸出， –

這種方法的一個問題是，如果您選擇了錯誤的選項，用戶需要重新加載整個頁面才能重新選擇是否意味着完全隱藏下拉菜單。但是，如果這是您希望採用的方法，只需在腳本中添加一個onchange處理程序，以在JS document.getElementById（id）.style.display = none;中通過id選擇下拉列表。如果這不是你的意思，說明你想做什麼，我們會再試一次。

來源

2017-08-25 20:42:35

試一下：a fiddle

$(".button").click(function() { 
    $("header nav div ul").animate({ 
    opacity: 1, 
    height: "toggle" 
    }, 300); 
}); 
$('.navbar li a').click(function(){ 
    $("header nav div ul").animate({ 
    opacity: 1, 
    height: "toggle" 
    }, 300); 
});

來源

2017-08-25 20:54:24

你不需要添加菜單公開課，動畫是在這裏做的一切 –

這也適用於我。選擇不同的答案，因爲這是我第一次嘗試，但感謝您花時間回覆。 –

$(".button").click(function() { 
    $("header nav div ul").animate({ 
    opacity: 1, 
    height: "toggle" 
    }, 300, function() { 
    $("header nav div ul").toggleClass("menu-open"); 
    $('.navbar li a').click(function(){ 
     $("header nav div ul").toggleClass("menu-open"); 
     $("header nav div ul").animate({ 
    opacity: 1, 
    height: "hide" 
    }, 300); 
    }); 
    }); 
});

我想事端像在JS bin和它的工作。這是你想要的？

jsbin

來源

2017-08-25 20:54:59 Frank

你不需要添加菜單打開的類，動畫是在這裏做的一切 –

我添加了一個click事件爲<li>，然後模擬點擊.button

$(".button").click(function() { 
 
    $("header nav div ul").animate({ 
 
    opacity: 1, 
 
    height: "toggle" 
 
    }, 300, function() { 
 
    $("header nav div ul").toggleClass("menu-open"); 
 
    }); 
 
}); 
 

 
$("li").click(function() { 
 
    $(".button").trigger("click"); // Simulate the button click 
 
});

header nav div ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    line-height: 1.75; 
 
    background-color: rgba(255, 255, 255, 0.6); 
 
    margin-top: 5px; 
 
    overflow: hidden; 
 
    height: auto; 
 
    display: none; 
 
} 
 

 
header nav div ul.menu-open { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <nav class="navbar"> 
 
    <div class="inner-wrapper"> 
 
     <a class="button" id="menu-button">Menu</a> 
 
     <ul> 
 
     <li><a href="#about">About</a></li> 
 
     <li><a href="#classes">Classes</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
</header>

來源

2017-08-26 06:42:12 Gerard

製作鏈接後下拉菜單消失，已被選定

回答

相關問題