[英]Jquery conditional dropdown menu toggling
我很痛苦。 :)
我正在創建一個卡路里計算器,其中包含針對某些飲食偏好的下拉菜單。 我進行了設置,以便當用戶單擊按鈕時,將顯示下拉列表。 當用戶單擊按鈕之外時,它消失了。
我想要我似乎無法實現的兩件事。
再次單擊按鈕,使“顯示”類從“ #myDropdown”中消失
當下拉菜單為“顯示”時,我想將按鈕旁邊的“ fa-plus-down”關聯起來;當按鈕為“關閉”時,我希望其旁邊為“ fa-plus-up”圖標。
// 1.問題最嚴重,我看不到邏輯在哪里。 任何輸入表示贊賞。 //
<div id="contenttable">
<div class="maindish">
<div class="dropdown">
<button onclick="selectDiet()" class="dropbtn main">Diet or Allergen Filter <i class="fa fa-sort-down" style=""></i></button>
<div id="myDropdown" class="dropdown-content">
<a id="veganDiet" class="dropbtn"><img src="http://www.padthai.decorolux.com/wp-content/uploads/2017/11/vegan2-1.png" style="width:40px; display:inline; height:20px; vertical-align:middle;"> Vegan</a>
<a id="vegetarianDietButton" class="dropbtn"><img src="http://www.padthai.decorolux.com/wp-content/uploads/2017/11/vegetarian-1.png" style="width:40px; height:20px; display:inline; vertical-align:middle;"> Vegetarian</a>
<a id="noAddesSugarButton" class="dropbtn"><img src="http://www.padthai.decorolux.com/wp-content/uploads/2017/11/sugarfree-1.png" style="width:40px; height:20px; display:inline; vertical-align:middle;"> No Added Sugar</a>
</div>
</div>
和JS
function selectDiet() {
document.getElementById("myDropdown").classList.add("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches(".dropbtn")) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains("show")) {
openDropdown.classList.remove("show");
}
}
}
};
// Close the dropdown if the user clicks on it again
if ($(".dropdown").hasClass('show')) {
$("button.dropbtn.main").click(function() {
$("#myDropdown").removeClass("show");
})};
// Dropdown menu animation
$("button.dropbtn.main").click(function() {
$(this).children().toggleClass('fa-sort-down');
// $(this).children().removeClass('fa-times-circle');
$(this).children().toggleClass('fa-sort-up');
});
在此先感謝,在codepen上可以查看。
由於您使用的是jQuery,因此我在其中編寫了函數。
第一個函數在單擊.dropbtn
打開和關閉下拉菜單,使用slideToggle()
表示下拉菜單,使用toggleClass()
表示圖標(請注意,它會切換兩個類)。
$('.dropbtn').on('click', function() {
$('#myDropdown').slideToggle();
$(this).find('i').toggleClass('fa-sort-up fa-sort-down')
});
然后,當我們在這些元素之外單擊時,您想關閉下拉菜單。 為此,我編寫了此功能。 它使用slideUp
關閉下拉菜單,並刪除和添加圖標的類。
$(document).mouseup(function(e) {
var container = $("#myDropdown, .dropbtn");
if (!container.is(e.target)
&& container.has(e.target).length === 0
&& $("#myDropdown").is(':visible') ) {
$("#myDropdown").slideUp();
$('.dropbtn i').addClass('fa-sort-up').removeClass('fa-sort-down')
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.