javascript - 关闭隐藏的 div onclick 并切换另一个 div

Question

我正在使用以下代码来切换隐藏的 div。

function toggle_visibility(id) {
       var e = document.getElementById(id);

          $(e).slideToggle("slow");




    }

<div id="toplinks">
<a href="../index.php">Home</a> | <a href="#" onclick="toggle_visibility('aboutus');">About Us</a> | <a href="#" onclick="toggle_visibility('contact');" >Contact us</a> | <a href="#" onclick="toggle_visibility('social');">Social Media</a> | <a href="#" onclick="toggle_visibility('contact');">Send your demo</a> | <a href="#" onclick="toggle_visibility('presskit');">Press Kit</a>
</div><!--toplinks end -->

问题是，如果我点击所有这些，它们都会同时出现在页面中。有没有办法自动关闭一个（如果它打开），以便单击时只显示一个 div？

Answer 1

您可以将您的 prev id 保存在变量中，如果它不为空，请再次切换。例如：

var prevId;

function toggle_visibility(id) {
   if(prevId && id !== prevId){
      $("#"+prevId).slideToggle("slow");
   }
   var e = document.getElementById(id);

      $(e).slideToggle("slow");
   prevId = id;

}

Answer 2

是的。

首先，将panelcss 类添加到每个假设在单击导航项时出现和消失的面板。

其次，将 css 类添加到每个 <a>标签及其名称（home、aboutus 等...）

然后使用这个 jQuery 代码：

$(function(){
    $('#toplinks a').click(function(){
        $('.panel').hide(); // hide all panels
        if ($(this).hasClass('home')) {
            $('.panel.home').fadeIn(); // show homepage panel
        }
        else if ($(this).hasClass('aboutus')) {
            $('.panel.aboutus').fadeIn(); // show about us panel
        }
        // more items ...
    });
});

希望有帮助。