隐藏、显示 div 和 jQuery

Question

我在我的网站上做了常见问题解答页面。 hide/show div 块对问题的回答有一些问题。如果第二次单击相同的 link 或其他 link，我需要隐藏块。 jsfiddle link with code here

 <div  class="question">
<a id="myHeader1" href="javascript:slideonlyone('newboxes1');" >First question?</a></div>
<div class="newboxes" id="newboxes1" style="display: block;" > </div>
 <div  class="question">
<a id="myHeader2" href="javascript:slideonlyone('newboxes2');" >Second question?</a>   </div>
<div class="newboxes" id="newboxes2" style="display: none;" > </div>

JS:

function slideonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).slideDown(200);
          }
          else {
               $(this).slideUp(600);
          }
     });
}

如果用户第二次单击同一块，如何关闭 div 块？我尝试使用帮助标记，但它不起作用。

Answer 1

你需要.slideToggle()id匹配时的内容（即在if条件内）。但是，您可以简单地将代码优化为：

function slideonlyone(thechosenone) {
  $('.newboxes').not('#'+thechosenone).slideUp(600);
  $('.newboxes#'+thechosenone).slideToggle(200);
}

Working Demo

Answer 2

请使用 slideToggle 而不是 slideDown。 :)

http://jsfiddle.net/m9bdLw4c/1/

function slideonlyone(thechosenone) {
 $('.newboxes').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
           $(this).slideToggle(200);

      }
      else {
           $(this).slideUp(600);

      }

 });

（编辑：抱歉，我在编辑的时候已经回答了。不是故意重复的！）

Answer 3

试试这个，

function slideonlyone(thechosenone) {
    $('.newboxes').each(function (index) {
        $(this).slideUp(600);
        if ($(this).attr("id") == thechosenone && !$(this).is(':visible')) {
            $(this).slideDown(200);
        }
    });
}

Working Demo

或者，你不需要使用循环试试，

function slideonlyone(thechosenone) {
    $('.newboxes').slideUp(600);
    var $id=$('#'+thechosenone);
    if ( !$id.is(':visible')) {
        $id.slideDown(200);
    }
}

Live Demo

Answer 4

为打开的元素设置一个活动 css class。所以你可以决定哪个元素是 openend 并且必须在第二次点击时关闭。这里的代码：

function slideonlyone(thechosenone) {
 $('.newboxes').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
          if( $(this).hasClass( 'active' )) {
               $(this).slideUp(600).removeClass( 'active' );
          } else {
              $(this).slideDown(200).addClass( 'active' );
          }               
      }
      else {
           $(this).slideUp(600);
      }
 });
}

您可以在此处找到演示：http://jsfiddle.net/p2622b1t/

Answer 5

你可以试试这个..

function slideonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
              if($(this).hasClass("open"))
              {
                  $(this).slideUp(600);
                  $(this).removeClass("open");
              }
              else
              {
               $(this).slideDown(200);
              $(this).addClass("open");
              }
          }
          else {
               $(this).slideUp(600);
          }
     });
}

隐藏、显示 div 和 jQuery

Hide, show div with jQuery

jquery

show

hide