因此,我已经接近要实现的目标,包括在单击“链接” divs(.click,.click2)中的任意位置时关闭slideToggle .divs,但有一个明显的例外...

当我单击“链接1”时,它会执行我想要的操作并显示.showup,然后,如果我单击“链接2”,它也将首先执行我想要的操作,并在.showup上显示.showup2,但是我需要.showup才能关闭他们不是同时打开的。

如您在我提供的代码中看到的那样,如果我再次直接单击“链接1”,则会出现两个“ showup” div已经打开的问题。showup仍然隐藏在.showup2后面。

同样,在上面的示例中,如果我先单击“链接2”,则打开.showup2,但是当我直接单击“链接1”时,.showup不会出现在.showup2上方

因此,最终,我希望我的slideToggle div隐藏在“链接” div(.click和.click2)之外的任何位置(当前它会这样做),但是ANYWHERE应该包括我的其他脚本指示的“链接” 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>


脚本

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


非常感谢您的帮助!乔丽

最佳答案

您可以使用与classbuttonboxes attr相同的data-target名称,以将目标元素转换为目标。

更新


每个按钮切换功能
添加了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>

关于javascript - 当另一个打开时,如何关闭当前可见(默认隐藏)的slideToggle().div?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44344300/

10-10 02:10