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

-1

请指教。我正在使用jQuery。我是begginer。我想用fadeIn（onclick）显示项目，然后点击第二次以用fadeOut隐藏它们。我的代码有什么问题？延迟很重要。jquery - 点击检查li项是否显示：none然后淡入，否则淡出

的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

来源

2017-03-09 Razi

请参阅我的答案。你只有一个错误，你错过了你的类选择器中的点。我修好了。 –

请[编辑]你的问题，以显示[你到目前为止尝试过的]（http://whathaveyoutried.com）。你至少应该包括一个你遇到问题的代码大纲（但最好是[mcve]），然后我们可以尝试帮助解决具体问题。你还应该阅读[问]。 –

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

来源

2017-03-09 10:17:30

这是不好的:) Thx。 – Razi

更好aprouch是fadeToggle功能，工作原理是这样

$(document).ready(function(){ 
 

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

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

来源

2017-03-09 10:19:34

试试这个，

$(document).ready(function(){ 
 

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

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

来源

2017-03-09 10:19:42 rahulsm

为此目的使用fadeToggle。

$("#btn").click(function(){ 
 
    \t $('#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>

来源

2017-03-09 10:19:57

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

来源

2017-03-09 10:20:25 guradio

我已经解决了这一问题。其实你错过了点。从以下选择：

$("sub-menu li");

更改上述给：

$(".sub-menu li");

当选择使用类的一些元素，使用点类名之前来选择。看到下面的小提琴。它工作正常。

$(document).ready(function(){ 
 

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

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

来源

2017-03-09 10:27:59

Thx多。当你变老时会发生这种情况:)干杯！ – Razi

@Razi - 请注意并标记答案，以便其他人可以受益:) –

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

回答

相关问题