Question

我正在使用隐藏/显示脚本。 div被隐藏，直到点击/点击另一个div。当用户单击另一个触发器时，将再次隐藏原始隐藏/显示div。这是一个例子 - 点击任何图标。

如果再次点击相同的图标，我希望隐藏/显示div再次隐藏所以：点击图标上的一次，div显示，再次点击相同的图标，div隐藏。

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

CSS＆amp; HTML：

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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>

Jquery代码

    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();
  });
});

javascript for hide / show on click - 想要再次点击隐藏

1 个答案: