如何创建javascript效果自动关闭元素？

Question

... 我想询问关于效果的使用，所以我有几个按钮，如果按下每个按钮将显示HTML元素<div>，我已经制作了代码

$(document).ready(function(){
    $('#label').click(function(){
        $('#menu1').toggle("speed");
    });

    $('#label2').click(function(){
        $('#menu2').fadeToggle("speed");
    });

    $('#label3').click(function(){
        $('#menu3').slideToggle("speed");
    });
});

我想如果其中一个菜单被点击另一个菜单中的元素关闭。 我请求指导，解决方案是什么？

Answer 1

$('.menu-link').click(function() {

  $('[id^=menu]').not('#menu' + this.id).slideUp();
  $('#menu' + this.id).slideToggle();

});

.menu-item {
  display: none;
  width: 100%;
  height: 200px;
  background: rgba(0,0,0,0.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><a href="#" id="1" class="menu-link">Menu 1</a>  <a href="#" id="2" class="menu-link">Menu 2</a>  <a href="#" id="3" class="menu-link">Menu 3</a>
<div id="menu1" class="menu-item">Menu 1</div>
<div id="menu2" class="menu-item">Menu 2</div>
<div id="menu3" class="menu-item">Menu 3</div>

Answer 2

给项目一个公共类并调用

$('.menu-item:visible').hide();

基本示例：

$(".tabs").on("click", "a", function () {
  
  var anchor = $(this),
      id = anchor.attr("href"),
      menuToToggle = $(id);
  
  anchor.closest("li").toggleClass("active", !menuToToggle.is(":visible")).siblings(".active").removeClass("active");
  
  $(".menu-item:visible").not(menuToToggle).hide();
  menuToToggle.fadeToggle();
  
  
  
});

.menu-item { display: none; }
li.active{ background-color: yellow; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="tabs">
  <li><a href="#menu1">One</a></li>
  <li><a href="#menu2">Two</a></li>
  <li><a href="#menu3">Three</a></li>
</ul>
<div id="menu1" class="menu-item">Menu 1 item</div>
<div id="menu2" class="menu-item">Menu 2 item</div>
<div id="menu3" class="menu-item">Menu 3 item</div>