Question

所以我接近我想要实现的目标，包括当我点击＆＃34;链接＆＃34;的任何地方时，我的slideToggle .divs关闭了。 div（.click，.click2）有一个明显的例外......

当我点击＆＃34;链接1＆＃34;如果我点击＆＃34;链接2＆＃34;它会做我想要的并显示。然后显示。它也最初做我喜欢和显示.showup2 over .showup但我需要.showup关闭，以便它们不会同时打开。

正如您在我提供的代码中所看到的那样，这会给＆＃34; showup＆＃34;如果我直接点击＆＃34;链接1＆＃34; div已经打开再次.showup仍然隐藏在.showup2背后。

同样，在上面的例子中，如果我点击＆＃34; Link 2＆＃34;首先，.showup2打开，但是当我直接点击＆＃34;链接1＆＃34;时，.showup不会出现.showup2

因此，当我点击我的＆＃34; Link＆＃34;之外的任何地方时，我希望我的slideToggle div隐藏起来。 divs（.click和.click2） - 它当前所做的 - 但是任何地方都应该包含我指示的其他脚本＆＃34; Link＆＃34; div的！这就是我难倒的地方。

以下是以非常简单的示例演示的代码：

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>

SCRIPT

$(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;}

非常感谢您的帮助！ Jorie

Answer 1

您可以使用class和button。[{1}} attr的相同boxes名称来定位要切换的元素。

已更新

使用每个按钮切换功能
data-target添加了文本切换功能

＆＃13;

Bold

＆＃13;

$(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')
})

＆＃13;

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;
}

＆＃13;

当另一个打开时，如何让当前可见（默认隐藏）slideToggle（）。div关闭？

1 个答案: