代码之家 › 专栏 › 技术社区 › Pbalazs89

Jquery条件下拉菜单切换

conditional html jquery javascript

Pbalazs89 · 技术社区 · 8 年前

我很痛苦。:)

我正在创建一个卡路里计算器,它有一个特定饮食偏好的下拉列表。我将其设置为,当用户单击按钮时,会出现下拉列表。当用户在按钮外单击时,它将消失。

我想要两件我似乎无法实现的事情。

再次单击按钮可使类“show”从“#myDropdown”中消失
当下拉菜单为“show”时,我想将按钮旁边的“fa plus down”关联起来,当它“closed”时,我想在按钮旁边显示“fa plus up”图标。

// 问题最大,我看不出逻辑在哪里有帮助。欢迎您的任何意见。 //

<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 。

1 回复 | 直到 8 年前

GreyRoofPigeon 8 年前

因为您使用的是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')
  }
});

Updated CODEPEN