jQuery-单击检查LI项目是否显示:无:然后淡入它，否则将其淡出

Question

请建议。我正在使用jQuery。我是乞eg。我想用Fadein（OnClick）展示项目，然后在第二次单击时以淡入淡出。我的代码怎么了？延迟很重要。

javaScript：

$(document).ready(function(){ 
    $("#btn").click(function(){ 
        if ($("sub-menu li").css('display') == 'none') {
            $("#navbar li").each(function(i) {
                $(this).delay(100 * i).fadeIn(500);
                    });
        } else {
            $("#navbar li").each(function(i) {
                $(this).delay(100 * i).fadeOut(500);
                     });
        }
    });
 });

标记：

<button id="btn">CLICK ME</button>
<div class="sub-menu" id="dropDownMenu">
    <ul id="navbar">
        <li>ONE</li>
        <li>TWO</li>
        <li>THREE</li>
        <li>FOUR</li>
        <li>FIVE</li>
    </ul>
</div>

CSS：

.sub-menu {
    position: absolute;
    z-index: 1000;
}
.sub-menu li {
    display: none;
}

在这里工作小提琴

Answer 1

一个更好的aprouch是通过 fadeToggle函数，它像这样

$(document).ready(function(){ 
	$("#btn").click(function(){ 
    			$("#navbar li").each(function(i) {
    				$(this).delay(100 * i).fadeToggle(500);
		 				});
    
 
	});
 });

.sub-menu {
    position: absolute;
    z-index: 1000;
}
.sub-menu li {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">CLICK ME</button>
<div class="sub-menu" id="dropDownMenu">
    <ul id="navbar">
        <li>ONE</li>
        <li>TWO</li>
        <li>THREE</li>
        <li>FOUR</li>
        <li>FIVE</li>
    </ul>
</div>

Answer 2

尝试这个，

$(document).ready(function(){ 
	$("#btn").click(function(){ 
  	$(".sub-menu").fadeToggle( "slow", "linear" );
	});
 });

.sub-menu {
    position: absolute;
    z-index: 1000;
}
.sub-menu {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">CLICK ME</button>
<div class="sub-menu" id="dropDownMenu">
    <ul id="navbar">
        <li>ONE</li>
        <li>TWO</li>
        <li>THREE</li>
        <li>FOUR</li>
        <li>FIVE</li>
    </ul>
</div>

这是Fadetoggle文档的链接。

Answer 3

为此目的使用fadetoggle。

$("#btn").click(function(){ 
  	  $('#navbar li').fadeToggle(1000); // Yourr calculation for toggle.
 });

.sub-menu {
    position: absolute;
    z-index: 1000;
}
.sub-menu li {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">CLICK ME</button>
<div class="sub-menu" id="dropDownMenu">
    <ul id="navbar">
        <li>ONE</li>
        <li>TWO</li>
        <li>THREE</li>
        <li>FOUR</li>
        <li>FIVE</li>
    </ul>
</div>

Answer 4

$(document).ready(function() {
  $("#btn").click(function() {
    $("#navbar li").toggle("slow")
  });
});

.sub-menu {
  position: absolute;
  z-index: 1000;
}
.sub-menu li {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">CLICK ME</button>
<div class="sub-menu" id="dropDownMenu">
  <ul id="navbar">
    <li>ONE</li>
    <li>TWO</li>
    <li>THREE</li>
    <li>FOUR</li>
    <li>FIVE</li>
  </ul>
</div>

使用.toggle()

Answer 5

$(document).ready(function() {
  $("#btn").click(function() {
    if ($(".sub-menu li").css('display') == 'none') //. was missing here
    {
      $("#navbar li").each(function(i) {
        $(this).delay(100 * i).fadeIn(500);
      });
    } else {
      $("#navbar li").each(function(i) {
        $(this).delay(100 * i).fadeOut(500);
      });
    }
  });
});

.sub-menu {
  position: absolute;
  z-index: 1000;
}
.sub-menu li {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">CLICK ME</button>
<div class="sub-menu" id="dropDownMenu">
  <ul id="navbar">
    <li>ONE</li>
    <li>TWO</li>
    <li>THREE</li>
    <li>FOUR</li>
    <li>FIVE</li>
  </ul>
</div>

Answer 6

我已经解决了问题。实际上，您从以下选择器中错过了点。：

 $("sub-menu li");

将上述更改为：

 $(".sub-menu li");

使用类选择一些元素时，请使用DOT在类名称之前选择该元素。请参阅以下小提琴..它的工作正常。

$(document).ready(function(){ 
	$("#btn").click(function(){ 
  	if ($(".sub-menu li").css('display') == 'none') {
    			$("#navbar li").each(function(i) {
    				$(this).delay(100 * i).fadeIn(500);
		 				});
    } else {
    			$("#navbar li").each(function(i) {
    				$(this).delay(100 * i).fadeOut(500);
		 				 });
    }
	});
 });

.sub-menu {
    position: absolute;
    z-index: 1000;
}
.sub-menu li {
    display: none;
}

<button id="btn">CLICK ME</button>
<div class="sub-menu" id="dropDownMenu">
    <ul id="navbar">
        <li>ONE</li>
        <li>TWO</li>
        <li>THREE</li>
        <li>FOUR</li>
        <li>FIVE</li>
    </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>