Jquery - 点击检查li项目是否显示：none然后将其淡入淡出，否则淡出

Question

请指教。我正在使用jQuery。我是先生。我想用fadeIn（onclick）显示项目，然后在第二次单击时用fadeOut隐藏它们。我的代码出了什么问题？延误很重要。

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;
}

Working fiddle here

Answer 1

更好的aprouch是fadeToggle函数，就像这样工作

＆＃13;

＆＃13;

$(document).ready(function(){ 

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

＆＃13;

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

}

.sub-menu li {
    display: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

$(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);
      });
    }

  });
});

＆＃13;

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

.sub-menu li {
  display: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试这个，

＆＃13;

＆＃13;

$(document).ready(function(){ 

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

＆＃13;

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

}

.sub-menu {
    display: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

以下是fadetoggle文档的link。

Answer 4

为此目的使用fadeToggle。

＆＃13;

＆＃13;

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

＆＃13;

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

}

.sub-menu li {
    display: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

$(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 6

我已经解决了这个问题。实际上你错过了以下选择器中的点。：

 $("sub-menu li");

将上述内容更改为：

 $(".sub-menu li");

使用class选择某些元素时，请使用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>