单击时隐藏/显示的 javascript - 想再次添加单击时隐藏

Question

我正在使用隐藏/显示脚本。在单击/点击另一个 div 之前，div 是隐藏的。当用户点击另一个触发器时，原来的隐藏/显示 div 再次隐藏。这是一个示例 - 单击任何图标。

如果再次单击相同的图标，我希望隐藏/显示 div 再次隐藏:单击图标一次，div 显示，再次单击相同的图标，div 隐藏。

我已经在多个页面上使用了这个脚本，所以我希望只是修改它。

CSS 和 HTML:

jQuery(function() {
  jQuery('#showall').click(function() {
    jQuery('.targetDiv').show();
  });
  jQuery('.showSingle').click(function() {
    jQuery('.targetDiv').hide();
    jQuery('#div' + $(this).attr('target')).show();
  });
});

#div1 {
  position: absolute;
  top: 145px;
  left: 310px;
  display: none;
}

#div2 {
  position: absolute;
  top: 167px;
  left: 486px;
  display: none;
}

#div3 {
  position: absolute;
  top: 125px;
  left: 630px;
  display: none;
}

#div4 {
  position: absolute;
  top: 486px;
  left: 240px;
  display: none;
}

#div5 {
  position: absolute;
  top: 457px;
  left: 710px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--clickable icons-->
<a class="showSingle" target="1"><img src="images/icon1.png" width="91" height="91" alt="" /></a>
<a class="showSingle" target="2"><img src="images/icon2.png" width="91" height="91" alt="" /></a>
<a class="showSingle" target="3"><img src="images/icon3.png" width="91" height="91" alt="" /></a>
<a class="showSingle" target="4"><img src="images/icon4.png" width="91" height="91" alt="" /></a>
<a class="showSingle" target="5"><img src="images/icon5.png" width="91" height="91" alt="" /></a>

<!--show/hide divs-->
<div id="div1" class="targetDiv"><img src="images/hover1.png" width="140" height="82" alt="" /></div>
<div id="div2" class="targetDiv"><img src="images/hover2.png" width="133" height="60" alt="" /></div>
<div id="div3" class="targetDiv"><img src="images/hover3.jpg" width="384" height="151" alt="" /></div>
<div id="div4" class="targetDiv"><img src="images/hover4.png" width="162" height="96" alt="" /></div>
<div id="div5" class="targetDiv"><img src="images/hover5.png" width="231" height="150" alt="" /></div>

Answer 1

这里修改了你的代码，如你所愿

<div>
<div id="div1" class="targetDiv"><img  width="140" height="82" alt="" /></div>
<div id="div2" class="targetDiv"><img  width="133" height="60" alt="" /></div>
<div id="div3" class="targetDiv"><img  width="384" height="151" alt="" /></div>
<div id="div4" class="targetDiv"><img  width="162" height="96" alt="" /></div>
<div id="div5" class="targetDiv"><img  width="231" height="150" alt="" /></div>
<div>

J查询代码

    jQuery(function() {
  jQuery('#showall').click(function() {
    jQuery('.targetDiv').show();
  });
  jQuery('.showSingle').bind('click', function() {
    jQuery('#div' + $(this).attr('target')).toggle('show');
    jQuery('#div' + $(this).attr('target')).siblings().hide();
  });
});