如何让当前可见（默认隐藏）的 slideToggle() .div 在打开另一个时关闭？

Question

所以我已经接近我想要实现的目标，包括当我单击 "link" div（.click、.click2）的任意位置时关闭我的 slideToggle .divs，但有一个明显的例外。 .

当我单击 "Link 1" 时，它会执行我想要的操作并显示 .showup 然后如果我单击 "Link 2" 它最初也会执行我想要的操作并在 .showup 上显示 .showup2 但是我需要关闭 .showup，这样它们就不会同时打开。

正如您在我提供的代码中看到的那样，如果我再次直接单击 "Link 1"，这会导致两个 "showup" div 都已打开的问题。showup 仍然隐藏在 .showup2[=14= 后面]

同样，在上面的示例中，如果我先单击 "Link 2"，.showup2 打开，但是当我随后直接单击 "Link 1" 时，.showup 不会出现在 .showup2

之上

所以最终我希望我的 slideToggle div 在我点击我的 "Link" div（.click 和 .click2）之外的任何地方时隐藏——它目前是这样做的——但是 ANYWHERE 应该包括我指示的其他脚本"Link" 分区！！这就是我难过的地方。

这是在一个非常简化的示例中演示的代码：

HTML

<div class="click">Link 1</div> <div class="click2">Link 2</div>
<div class="showup">something I want to show</div>
<div class="showup2">something else I want to show</div>

脚本

$(document).ready(function(){
    $('.click').click(function(event){
        event.stopPropagation();
         $(".showup").slideToggle("fast");
    });

});

$(document).on("click", function () {
    $(".showup").hide();
});


$(document).ready(function(){
    $('.click2').click(function(event){
        event.stopPropagation();
         $(".showup2").slideToggle("fast");
    });

});

$(document).on("click", function () {
    $(".showup2").hide();
});

CSS

body{margin:50px;}

.showup,
.showup2 { width:100%;height:100px; background:red; display:none; position: fixed;}

.click,
.click2 { cursor:pointer; display:inline-block; padding: 0 15px;}

非常感谢您的帮助！乔里

Answer 1

您可以使用 button 和 boxes 的相同 class 名称。data-target attr 用于定位要切换的元素。

已更新

每个按钮的切换功能
Bold 添加了文本切换功能

$(document).ready(function() {
  $('.click').click(function(event) {
    event.stopPropagation();
    if($(".showup").eq($(this).attr('data-target')).css('display') == 'block'){
    $(".showup").eq($(this).attr('data-target')).slideUp();
      $('.click').removeClass('bold')
    }
    else{
      $(".showup").hide();
       $('.click').removeClass('bold')
    $(".showup").eq($(this).attr('data-target')).slideToggle("fast");
      $(this).toggleClass('bold')
    }
  });
}).on('click',function(){
$(".showup").hide();
  $('.click').removeClass('bold')
})

body {
  margin: 50px;
}

.showup{
  width: 100%;
  height: 100px;
  background: red;
  display: none;
  position: fixed;
}
.bold{
font-weight:bold;
}

.click{
  cursor: pointer;
  display: inline-block;
  padding: 0 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click" data-target="0">Link 1</div>
<div class="click" data-target="1">Link 2</div>
<div class="showup">something I want to show</div>
<div class="showup">something else I want to show</div>

如何让当前可见（默认隐藏）的 slideToggle() .div 在打开另一个时关闭？

How do I get a currently visible (default hidden) slideToggle() .div to close when another is opened?

javascript

slidetoggle