单击显示div，然后单击全部删除

Question

尝试在点击时打开每个容器div，然后按钮删除所有内容。但是当我在删除后重新点击以显示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

Because you are hiding the container, so when you are clicking an item to show even though that items display is set the container is hidden so nothing is displayed.

One solution is to hide the toggle elements instead of container like

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

Another option is to call show of the container in each click

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