Скрыть и показать меню child

Question

В настоящее время я работаю с куском jquery, который скрывает и показывает несколько разделов, когда нажимается элемент меню.

Однако на данный момент, если вы хотите щелкнуть по тому же пункту меню, вновь открытый div останется открытым, а не закрытием по желанию. Я также хотел бы получить функцию div div, когда нажимается элемент div «submit».

Любой совет будет здорово

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(). I предположим, что вы хотите, чтобы все три 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/