Question

我正在制作一个模板，我有3个问题和答案，我试图隐藏，只有在使用切换/悬停或点击后，用户才能看到答案。现在我能够隐藏答案但无法使用3个选项中的任何一个显示它们。代码如下：

  <div class="main">
            <h1>A One Page FAQ</h1>
            <h2>I've heard that JavaScript is the long-lost fountain of youth. Is this true?</h2>
            <div class="answers">
                <p>Why, yes it is! Studies prove that learning JavaScript freshens the mind and extends life span by several hundred years. (Note: some scientists disagree with these claims.) </p>
            </div>
            <h2>Can JavaScript really solve all of my problems?</h2>
            <div class="answers">
                <p>Why, yes it can! It's the most versatile programming language ever created and is trained to provide financial management advice, life-saving CPR, and even to take care of household pets.</p>
            </div>
            <h2>Is there nothing JavaScript <i>can&#8217;t</i> do?</h2>
            <div class="answers">
                <p>Why, no there isn&#8217;t! It&#8217;s even able to write its own public relations-oriented Frequently Asked Questions pages. Now that&#8217;s one smart programming language!</p>
            </div>
        </div>

，脚本是：

   $(document).ready(function () {
        $('.answers').hide();
        $('.main h2').click(
            function () {
                $('.answers').show();
            },
            function(){
           $('.answers').hide();
            }
        );
        });

不知道我错在哪里。

Answer 1

click需要一个事件处理程序。如果您使用旧版本的jQuery，则应该使用toggle。

http://jsfiddle.net/uzgvxhj0/

否则，只需使用$('.answers')上的toggle方法：

$('.main h2').click(function () {
    $('.answers').toggle();
});

http://jsfiddle.net/k13bnmdq/

请注意，您提供的脚本将切换所有答案的显示，而不是标题后面的那些答案。

Answer 2

正如zzzzBov所说，切换是一个更好的选择。我在这里嘲笑它：

http://jsfiddle.net/tjtp9jf5/1/

 $(document).ready(function () {
     $('.main h2').click(function () {
         $(this).next().toggle();
     });
 });

你可以使用它，它应该工作。单击问题时，代码会显示相应的答案。如果您希望显示所有答案，请使用：

$(".answers").toggle();

而不是

$(this).next().toggle();

Answer 3

我会使用CSS类而不是jQuery show / hide函数。通过这种方式，我们可以更好地控制我们想要对样式做什么。

＆＃13;

$('.main h2').on('click',function(){
  $(this).next('.answers').toggleClass('answers-revealed');
})

＆＃13;

.answers {
  display: none;  
}
.answers-revealed {
  display: block;  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
            <h1>A One Page FAQ</h1>
            <h2>I've heard that JavaScript is the long-lost fountain of youth. Is this true?</h2>
            <div class="answers">
                <p>Why, yes it is! Studies prove that learning JavaScript freshens the mind and extends life span by several hundred years. (Note: some scientists disagree with these claims.) </p>
            </div>
            <h2>Can JavaScript really solve all of my problems?</h2>
            <div class="answers">
                <p>Why, yes it can! It's the most versatile programming language ever created and is trained to provide financial management advice, life-saving CPR, and even to take care of household pets.</p>
            </div>
            <h2>Is there nothing JavaScript <i>can&#8217;t</i> do?</h2>
            <div class="answers">
                <p>Why, no there isn&#8217;t! It&#8217;s even able to write its own public relations-oriented Frequently Asked Questions pages. Now that&#8217;s one smart programming language!</p>
            </div>
        </div>

＆＃13;

无法切换/点击/悬停答案

3 个答案: