[英]Hide and show menu child
我目前正在使用一块jquery,当单击菜单项时,该jquery隐藏并显示了多个div。
但是,此时,如果您要单击同一菜单项,则新打开的div仍保持打开状态,而不是根据需要关闭。 当单击div类的“ submit”时,我也想实现hide div函数。
任何建议都很好
https://jsfiddle.net/a9ykpdwz/
jQuery的
$("#one, #two, #three").hide();
$(".one, .two, .three").click(function (e) {
e.preventDefault();
$("#" + $(this).attr("class")).fadeIn(1000).siblings('#one, #two, #three').fadeOut(1000);
});
的HTML
<div id="nav">
<a href="#" class="one">WORK</a>
<a href="#" class="two">ABOUT</a>
<a href="#" class="three">CONTACT</a>
</div>
<div id="one">
<ul>
<li>xx</li>
<li>Spaces</li>
<li>Form</li>
<li>Mind and Body</li>
<li>Moving Image</li>
<li>White Trails</li>
<li>Foreign Views</li>
<ul>
<div class="submit"> close </div>
</div>
<div id="two">Text</div>
<div id="three">Text</div>
使用fadeToggle()
而不是fadeIn()
。 我假设您的意思是您希望将所有三个div隐藏在submit
,这在下面起作用。
$("#one, #two, #three").hide(); $(".one, .two, .three").click(function(e) { e.preventDefault(); $("#" + this.className).fadeToggle(1000).siblings('#one, #two, #three').fadeOut(1000); }); $('.submit').click(function(e) { $('#one, #two, #three').fadeOut(1000); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="nav"> <a href="#" class="one">WORK</a> <a href="#" class="two">ABOUT</a> <a href="#" class="three">CONTACT</a> </div> <div id="one"> <ul> <li>xx</li> <li>Spaces</li> <li>Form</li> <li>Mind and Body</li> <li>Moving Image</li> <li>White Trails</li> <li>Foreign Views</li> </ul> <!-- corrected a missing / here --> <div class="submit">close</div> </div> <div id="two">Text</div> <div id="three">Text</div>
.close
元素创建事件 小提琴: https : //jsfiddle.net/a9ykpdwz/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.