Question

我正在尝试为一组动画信息框编写JQuery。点击标题div.info-box__title应打开相邻的div.info-box__content，同时关闭其他任何开放div.info-box__content

更新 - 应该已经指定，我还需要在用户点击任何.info-box之外时关闭所有框。

更新2 - 摆弄：https://jsfiddle.net/q9orfsoy/

标记是这样的：

 <section id="info-box-3" class="info-box">
     <div class="centerer">
         <div class="info-box__close"></div>
         <div class="info-box__title">
             <h1>Title</h1>
         </div>
         <div class="info-box__content">
             <p>content</p>
         </div>
    </div>
</section>

我总是很难解决JS的执行顺序问题。到目前为止，我有两个功能：

开放：

$('.info-box__title').bind("click touchstart", function() {

    // close the others and open this one
    if($(this).next('.info-box__content').css('display') == 'none') {
        $(this).next('.info-box__content').slideDown();
        $(this).parents('.info-box').addClass('open');
        $(this).parents('.info-box.open').siblings().children('.info-box__title').hide();
    }
});

闭合：

// hide all when click anywhere else in the document
$(document).bind("click touchstart", function(event) {

    // exclude the one that's currently open
    if(!$(event.target).closest('.info-box.open').length){
        $('.info-box__content').slideUp(function(){
            $(this).parents('.info-box').removeClass('open');
        });
    }
});

此代码执行的操作是在您单击外部时关闭所有info-box__content div。但是如果你点击另一个信息框_标题，它就会打开它，而不会关闭其余信息。

（最初我以为在打开的那个中添加一个.open类就足够了，但我想我遇到了执行顺序问题？）

处理这类事情的最佳/推荐方法是什么？

Answer 1

关闭所有内容，然后使用此对象打开所需的内容。

$('.info-box__title').click(function() {
    $('.info-box__content').hide(); //or perform closing action
    $(this).siblings('.info-box__content').show(); //or perform opening action
});

要在任何信息框外单击时关闭，

$('body').not('.info-box').click(function() {
    $('.info-box__content').hide(); //or perform closing action
});

Answer 2

这是一个解决方案。

＆＃13;

 $('.info-box__title').click(function() {
    var sibling = $(this).siblings('.info-box__content');    
    if(!sibling.is(':visible')){
     $('.info-box__content:visible').slideUp();
        sibling.slideDown(); }
    else sibling.slideUp();
 });
$(document).bind("click touchstart", function(e)
{
    var open_content = $(".info-box__content:visible");

    if (!open_content.parent().is(e.target) 
        && open_content.parent().has(e.target).length === 0) 
    {
        open_content.slideUp();
    }
});

＆＃13;

.info-box__title{background:grey;}
.info-box__content{
height:100px;
  display:none;
background:red;

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section id="info-box-3" class="info-box">
     <div class="centerer">
         <div class="info-box__close"></div>
         <div class="info-box__title">
             <h1>Title</h1>
         </div>
         <div class="info-box__content">
             <p>content</p>
         </div>
    </div>
</section>
<section id="info-box-4" class="info-box">
     <div class="centerer">
         <div class="info-box__close"></div>
         <div class="info-box__title">
             <h1>Title</h1>
         </div>
         <div class="info-box__content">
             <p>content</p>
         </div>
    </div>
</section>
<section id="info-box-5" class="info-box">
     <div class="centerer">
         <div class="info-box__close"></div>
         <div class="info-box__title">
             <h1>Title</h1>
         </div>
         <div class="info-box__content">
             <p>content</p>
         </div>
    </div>
</section>

＆＃13;

Answer 3

尝试使用.index()，jsfiddle https://jsfiddle.net/q9orfsoy/1/

var titles = $(".info-box__title");
var content = $(".info-box__content");

titles.on("click touchstart", function(e) {
   if ($(this).next(".info-box__content")
       .is(":visible")) {
      $(this).next(".info-box__content")
      .slideUp()
   } else {
  content.slideUp()
  .eq($(this).index(".info-box__title"))
  .slideDown()  
   }
});
// ALL boxes to close when user clicks outside any `.info-box`
$(document).on("click touchstart", function(e) {
  if ($(e.target).is(".info-box, .info-box *")) {
    return
  }
  else {
    content.slideUp()
  }
})

.info-box__content {
display: none;
}

.info-box {
border: 1px solid black;
padding; 20px;
margin:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
 <section id="info-box-1" class="info-box">
     <div class="centerer">
         <div class="info-box__close"></div>
         <div class="info-box__title">
             <h1>Title 1</h1>
         </div>
         <div class="info-box__content">
             <p>content</p>
         </div>
    </div>
</section>
 <section id="info-box-2" class="info-box">
     <div class="centerer">
         <div class="info-box__close"></div>
         <div class="info-box__title">
             <h1>Title 2</h1>
         </div>
         <div class="info-box__content">
             <p>content</p>
         </div>
    </div>
</section>
 <section id="info-box-3" class="info-box">
     <div class="centerer">
         <div class="info-box__close"></div>
         <div class="info-box__title">
             <h1>Title 3</h1>
         </div>
         <div class="info-box__content">
             <p>content</p>
         </div>
    </div>
</section>

Answer 4

你可以这样做：

$(document).bind("click touchstart", function(event) {
  var $openBox = $(event.target).closest('.open');
  $('.info-box__content').not($openBox).slideUp(function(){
    $(this).parents('.info-box').removeClass('open');
  });
});

这将选择与点击事件相关的所有其他框。

奖金说明

您当前的解决方案无法正常工作的原因是您只是检查open框是否存在，因为它确实存在，然后它会关闭所有带有类.info.box__content＆＃39的元素;。希望有意义！

Answer 5

使用 stop（）到slideDown（）或slideToggle（）目标部分轻松滑动所有课程：

$('.info-box__title').click(function() {
   $('.info-box__content').stop().slideUp();
   $(this).find('.info-box__content').stop().slideDown();
});

$('body').not('.info-box').click(function() {
   $('.info-box__content').stop().slideUp();
});

在JS / JQuery中打开1 div关闭同一类（不包括它自己）的所有其他div？

5 个答案: