javascript - 清除所有打开的 div

Question

我有一个脚本可以通过执行 onclick="toogle_visibility(id) 打开 div

事件但是当我想关闭打开和打开的div时怎么办

新的 div ?

Javascript/jQuery:

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

HTML:

<div class="navBar">
<a href="#social" onclick="toggle_visibility('Social')">Social</a>
<a href="#social" onclick="toggle_visibility('Foljer')">F&ouml;ljer</a>
<a href="#social" onclick="toggle_visibility('Bokmarken')">Bokm&auml;rken</a>
</div>
<div id="Social">
<a href="http://www.twitter.com/Liam_Rab3">@Liam_Rab3 - TWITTER</a><br>
<a href="http://www.twitter.com/Liam_Rab3">@Liam_Rab3 - INSTAGRAM</a><br>
<a href="http://www.facebook.com/LiamRab3">@LiamRab3- FACEBOOK</a><br>
<a href="http://www.youtube.com/howmuchtimedr">@Liam_Rab3 - YOUTUBE</a><br>
<a href="http://www.flickr.com/Liam_Rab3">@Liam_Rab3 - FLICKR</a><br>
<a href="http://www.thenotallowedguy.tk">@Liam_Rab3 - TUMBLR</a><br>
</div>
<div id="Foljer">
<a href="http://www.instagram.com/sebbestakset">Sebbe Stakset (Kartellen)</a>
</div>

CSS:

a:link {
color:white;
text-decoration:none;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
a:hover {
color:white;
text-decoration:none;
font-size:100%;
}
a:visited {
text-shadow:0px 0px 0px #0066BB;
color:white;
}
#social {
display:none;
}
#Foljer {
display:none;
}

免责声明!

#social 和#bokmarken 链接中的这些链接不用于商业目的。

Answer 1

您可以使用 JQuery Toggle

<div id="clickme">
  Click here !!!
</div>
<a href="#social" >Social</a>

$( "#clickme" ).click(function() {
  $( "#social" ).toggle(); //With no parameters, the .toggle() method simply toggles the visibility of elements:
});

首先选择您要隐藏/显示的控件，然后使用该控件的 id，如下所示:

$('#<id-of-that-control>').toggle();

现在您可以根据需要在按钮或 div 的 onclick 事件处理程序中调用它。

它对你来说可能是这样的:

JS

function toggle_visibility(id) {
     $('#' + id).toggle();
}

HTML

<div class="navBar">
<a href="#social" onclick="toggle_visibility('Social')">Social</a>
<a href="#social" onclick="toggle_visibility('Foljer')">F&ouml;ljer</a>
<a href="#social" onclick="toggle_visibility('Bokmarken')">Bokm&auml;rken</a>
</div>

更新:正如 Brodie 所指出的，似乎您可能总是在研究 Niet the Dark Absol 提供的解决方案。因为他为您提供了纯 JS 实现。我的解决方案将使您深入了解如何使用 JQuery 之类的库及其切换 API。 Jquery 提供了范围广泛的内置功能，可帮助您快速完成任务。我的一段代码为您提供的是 API 的使用，即切换，使用时将与隐藏和显示行为相同。