показать div на клик, а затем удалить все на клик

Question

Пытаясь открыть каждый контейнер div на клик, нажмите кнопку, чтобы удалить весь контент. но когда я reclick, чтобы показать DIV после удаления, ничего не будет отображаться http://jsfiddle.net/ZM9dL/467/

сценарий

$('.menu>li.toggle6').on('click',function(e){ 
     $('.container').hide(); 
}); 
$('.menu>li').on('click',function(e){ 
    $('.container>.'+ e.target.classList[0]).show().siblings().hide(); 
}); 

HTML

<ul class="menu"> 
    <li class="toggle1">One</li> 
    <li class="toggle2">Two</li> 
    <li class="toggle3">Three</li> 
    <li class="toggle4">Four</li> 
    <li class="toggle5">Five</li> 
    <li class="toggle6">Remove All</li> 
</ul> 

<div class="container"> 
    <div class="toggle1">Here are the contents of 1..</div> 
    <div class="toggle2">Here are the contents of 2..</div> 
    <div class="toggle3">Here are the contents of 3...</div> 
    <div class="toggle4">Here are the contents of 4....</div> 
    <div class="toggle5">Here are the contents of 5.....</div> 
</div> 

Answer 1

Потому что вы скрываете контейнер, поэтому, когда вы нажимаете пункт для пока отображается отображение элементов, контейнер скрыт, поэтому ничего не отображается.

Одно из решений, чтобы скрыть шарнирных элементов вместо контейнера, как

$('.menu > li.toggle6').on('click', function(e) { 
 
    $('.container > *').hide(); 
 
}); 
 
$('.menu > li').on('click', function(e) { 
 
    $('.container > .' + e.target.classList[0]).show().siblings().hide(); 
 
});

.menu > li { 
 
    display: inline-block; 
 
    font-weight: bold; 
 
    padding: 6px 10px; 
 
    cursor: pointer; 
 
    border: 2px solid tomato; 
 
    margin: 5px; 
 
} 
 
.container > div { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul class="menu"> 
 
    <li class="toggle1">One</li> 
 
    <li class="toggle2">Two</li> 
 
    <li class="toggle3">Three</li> 
 
    <li class="toggle4">Four</li> 
 
    <li class="toggle5">Five</li> 
 
    <li class="toggle6">Remove All</li> 
 
</ul> 
 

 
<div class="container"> 
 
    <div class="toggle1">Here are the contents of 1..</div> 
 
    <div class="toggle2">Here are the contents of 2..</div> 
 
    <div class="toggle3">Here are the contents of 3...</div> 
 
    <div class="toggle4">Here are the contents of 4....</div> 
 
    <div class="toggle5">Here are the contents of 5.....</div> 
 
</div>

Другой вариант заключается в вызове шоу контейнера в каждом клике

$('.menu > li.toggle6').on('click', function(e) { 
 
    $('.container > *').hide(); 
 
}); 
 
$('.menu > li:not(.toggle6)').on('click', function(e) { 
 
    $('.container').show().children('.' + e.target.classList[0]).show().siblings().hide(); 
 
});

.menu > li { 
 
    display: inline-block; 
 
    font-weight: bold; 
 
    padding: 6px 10px; 
 
    cursor: pointer; 
 
    border: 2px solid tomato; 
 
    margin: 5px; 
 
} 
 
.container > div { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul class="menu"> 
 
    <li class="toggle1">One</li> 
 
    <li class="toggle2">Two</li> 
 
    <li class="toggle3">Three</li> 
 
    <li class="toggle4">Four</li> 
 
    <li class="toggle5">Five</li> 
 
    <li class="toggle6">Remove All</li> 
 
</ul> 
 

 
<div class="container"> 
 
    <div class="toggle1">Here are the contents of 1..</div> 
 
    <div class="toggle2">Here are the contents of 2..</div> 
 
    <div class="toggle3">Here are the contents of 3...</div> 
 
    <div class="toggle4">Here are the contents of 4....</div> 
 
    <div class="toggle5">Here are the contents of 5.....</div> 
 
</div>