[英]Jquery conditional dropdown menu toggling
I'm in pain. 我很痛苦。 :)
:)
I'm creating a calorie calculator which has a dropdown for certain dietary preferences. 我正在创建一个卡路里计算器,其中包含针对某些饮食偏好的下拉菜单。 I have it set up so that when a user clicks on the button, the dropdown appears.
我进行了设置,以便当用户单击按钮时,将显示下拉列表。 When a user clicks outside the button, it disappears.
当用户单击按钮之外时,它消失了。
I want two things that I seem to be unable to achieve. 我想要我似乎无法实现的两件事。
Clicking on the button again makes the class "show" disappear from "#myDropdown" 再次单击按钮,使“显示”类从“ #myDropdown”中消失
When the dropdown is "show" I want to associate the 'fa-plus-down' next to the button, when it's 'closed' I want the 'fa-plus-up' icon next to it. 当下拉菜单为“显示”时,我想将按钮旁边的“ fa-plus-down”关联起来;当按钮为“关闭”时,我希望其旁边为“ fa-plus-up”图标。
// 1. is the most problematic, I can't see where the logic is help. // 1.问题最严重,我看不到逻辑在哪里。 Any input is appreciated.
任何输入表示赞赏。 //
//
<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>
And the JS 和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');
});
Thanks in advance, here is is viewable on codepen . 在此先感谢,在codepen上可以查看。
Since you are using jQuery, I wrote you the functions in it. 由于您使用的是jQuery,因此我在其中编写了函数。
The first function opens and closes the dropdown menu on a click on .dropbtn
using slideToggle()
for the dropdown and toggleClass()
for the icon (note that it toggles two classes). 第一个函数在单击
.dropbtn
打开和关闭下拉菜单,使用slideToggle()
表示下拉菜单,使用toggleClass()
表示图标(请注意,它会切换两个类)。
$('.dropbtn').on('click', function() {
$('#myDropdown').slideToggle();
$(this).find('i').toggleClass('fa-sort-up fa-sort-down')
});
Then you want to close the dropdown when we click outside these element. 然后,当我们在这些元素之外单击时,您想关闭下拉菜单。 Therefor I wrote this function.
为此,我编写了此功能。 It closes the dropdown by using
slideUp
and removes and adds the classes of the icon. 它使用
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.