隱藏和顯示菜單子項

Question

我目前正在使用一塊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>

Answer 1

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

Answer 2

1. 您沒有為.close元素創建事件
2. 如果要查看新元素並隱藏先前顯示的元素，則需要將其設置為不顯示，並且不進行過渡，因為元素是堆疊在一起的，在其他情況下，您需要將元素更改為絕對值。

小提琴： https : //jsfiddle.net/a9ykpdwz/2/