Question

是的，我问的太多，但我没有可用的javascript知识。我使用的代码正是你在w3school下拉列表演示中找到的代码。你可以让我的下拉列表淡入，滑入并淡出，滑出。这是：

/ *当用户点击按钮时，在隐藏和显示下拉内容之间切换* /

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

//如果用户点击其下方，则关闭下拉列表

window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
  var openDropdown = dropdowns[d];
  if (openDropdown.classList.contains('show')) {
    openDropdown.classList.remove('show');
      }
    }
  }
}

这是W3school demo link。这几乎是我的结构。

Answer 1

使用jQuery的fadeIn（）和fadeOut（）方法，这是可行的（http://api.jquery.com/fadein/ http://api.jquery.com/fadeout/）

function myFunction() {
      $("#myDropdown").fadeIn();
    //document.getElementById("myDropdown").classList.toggle("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];
      $("#myDropdown").fadeOut();
      /*if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }*/
    }
  }
}

$(function()
{
 $("#btnButton1").click(myFunction);
});

演示： https://jsfiddle.net/6ry2c7dn/1/

任何人都可以使这个下拉javascript淡入+滑入并淡出+滑出？

1 个答案: