我将如何添加到我的代码中,以便当我单击其他按钮时,打开的元素会自动关闭?

时间:2017-10-01 07:55:05

标签: javascript

我的代码有效,但我必须双击我点击的按钮才能关闭它。我希望当我点击另一个按钮时,打开的元素会自动关闭。

<div class="col- menu">
        <ul>
          <li><a href="#" onclick="toggleStuff('pic1'); return false;">Picture</a></li>
          <li><a href="#" onclick="toggleStuff('description'); return false;">About</a></li>
          <li><a href="#" onclick="toggleStuff('size'); return false;">Size</a></li>
        </ul>
      </div>

      <div class="content">
        <p><span id="pic1"><img src="1.jpg"></span></p>
        <p><span id="description" style="display: none;">Cool!</span></p>
        <p><span id="size" style="display: none;"><img src="2.jpg"></span></p>
      </div>


<script type="text/javascript">
function toggleStuff(id) {
  if (document.getElementById(id).style.display == 'block') {
    document.getElementById(id).style.display = 'none';
  } else {
    document.getElementById(id).style.display = 'block';
  }
}
</script>

3 个答案:

答案 0 :(得分:0)

你可以试试这个:

int bytes2copy = yourArray.length - 4;
Buffer.BlockCopy(yourArray, 4, yourArray, 0, bytes2copy);
yourArray[yourArray.length-1] = null;

答案 1 :(得分:0)

你需要循环遍历所有id的

请注意,这只是演示代码,可以为您提供一个想法

function toggleStuff (id){
 //get list of ids
 var pic1 = document.getElementById ("pic1");
 var size = document.getElementById ("size");

var idSize = 2;
var idArray = Array ("pic1","size");

for (var i = 0; i  < idSize; i++){
 if (idArray.indexOf (i) == id){
 //display id
}else {
//hide id
}
}
}

答案 2 :(得分:0)

数百万可能的解决方案中的一个:

&#13;
&#13;
function toggleStuff(id) {
  var el = document.getElementById(id)
  el.classList.toggle('visible');
  document.querySelectorAll('.togglable:not(#'+id+')').forEach(function(item) {
    item.classList.remove('visible');
  })
}
&#13;
.togglable {
  display: none;
}

.visible {
  display: block;
}
&#13;
<div class="col- menu">
  <ul>
    <li><a href="#" onclick="toggleStuff('pic1'); return false;">Picture</a></li>
    <li><a href="#" onclick="toggleStuff('description'); return false;">About</a></li>
    <li><a href="#" onclick="toggleStuff('size'); return false;">Size</a></li>
  </ul>
</div>

<div class="content">
  <p><span id="pic1" class="togglable">PIC1</span></p>
  <p><span id="description" class="togglable">DESCRIPTION</span></p>
  <p><span id="size" class="togglable">SIZE</span></p>
</div>
&#13;
&#13;
&#13;