Jquery

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

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

更好的方法是使用 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 3

试试这个，

$(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 文档的link。

Answer 4

为此目的使用 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 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

我已经解决了这个问题。实际上，您从以下 select 或：

中漏掉了点 .

 $("sub-menu li");

将以上内容改为：

 $(".sub-menu li");

当使用 class 对某些元素进行 select 时，在 class 名称之前使用点 select。请参阅以下 fiddle..它工作正常。

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

Jquery - 点击检查 li 项是否有 display:none 然后淡入，否则淡出

Jquery - on click check if li item has display:none and then fade it in, else fade it Out

click

fadeout

fadein