隐藏，使用jQuery显示div

Question

我在我的网站上做了FAQ页面。并与隐藏/显示div块与问题的答案有一些问题。如果第二次点击同一链接或其他链接，我需要隐藏区块。 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

试试这个，

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

Working Demo

或者，您不需要使用循环t RY它像，

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

Live Demo

Answer 2

您需要.slideToggle() id匹配时的内容（即内部条件）。然而，你可以简单地优化代码：

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

Working Demo

Answer 3

请使用代替了slideDown的slideToggle。 :)

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 4

设置打开元件的有源CSS类。所以你可以决定哪个元素是开放的，并且必须在第二次点击时关闭。下面的代码：

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