Question

我有问题＆amp;在我的网站上回答部分（FAQ）。

HTML看起来像这样

<div class="faq">
   <div class="container">

     <!-- FAQ 1 -->
     <h3><a href="">My FAQ 1</a></h3>
     <div><p>Answer to MY FAQ 1</p></div>

     <!-- FAQ 2 -->
     <h3><a href="">My FAQ 1</a></h3>
     <div><p>Answer to MY FAQ 1</p></div>   

     <!-- FAQ 3 -->
     <h3><a href="">My FAQ 1</a></h3>
     <div><p>Answer to MY FAQ 1</p></div>

   </div>    
</div>

jQuery看起来像这样

$(document).ready(function() {
    $(".faq h3 a").click(function(){
        $(this).parent().next().toggle();
        return false;
    })
});

这很好但我需要的是，如果有人点击任何一个FAQ＆amp;如果打开任何其他常见问题，则应自动关闭。

我试过这个

$(".faq h3 a").not($(this)).hide();

但它不起作用。

Answer 1

可能不是jQuery最优雅的用法

$(document).ready(function() {
    $(".faq h3 a").click(function(){
        var isVis = $(this).parent().next().css('display') == 'block';
        $(".faq h3 + div").hide();
        $(this).parent().next().toggle(!isVis);
        return false;
    })
});

jsfiddle

这应该正确切换，即点击一个打开的常见问题解答，它将关闭它

Answer 2

我想这就是你想要的。

说明：先关闭它们，然后打开单击的按钮。

<强>段：

＆＃13;

$(document).ready(function() {
  $(".container div").hide();
  $(".container div:nth-of-type(1)").show();

  $(".faq h3 a").click(function() {
    $(".container div").hide();
    $(this).parent().next().show();
    return false;
  })
});

＆＃13;

.container {
  background: #fff;
  padding: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="faq">
  <div class="container">

    <!-- FAQ 1 -->
    <h3><a href="">My FAQ 1</a></h3>
    <div>
      <p>Answer to MY FAQ 1</p>
    </div>

    <!-- FAQ 2 -->
    <h3><a href="">My FAQ 1</a></h3>
    <div>
      <p>Answer to MY FAQ 1</p>
    </div>

    <!-- FAQ 3 -->
    <h3><a href="">My FAQ 1</a></h3>
    <div>
      <p>Answer to MY FAQ 1</p>
    </div>

  </div>
</div>

＆＃13;

注意：对于过渡效果，您可以使用slideToggle('slow,fast, x ms')

jQuery如何选择div中的所有元素

2 个答案: