jQuery hide() 隐藏了它不应该隐藏的东西

Question

我有问题...jQuery 应该只在每个 h2 下隐藏 div，但它也隐藏了那些 h2...我该怎么办？

<!DOCTYPE>
<html>
<head>
    <title>Yolo</title>
    <script src="js/jquery-1.11.2.min.js"></script>
</head>
<body>
    <main>
        <div class="faq">
            <h2>Opcja 1</h2>
            <div class="answer">
                <p>Paragraph under option 1!</p>
            </div>
            <h2>Opcja 2</h2>
            <div class="answer">
                <p>Paragraph under option 2!</p>
            </div>
            <h2>Opcja 3</h2>
            <div class="answer">
                <p>Paragraph under option 3!</p>
            </div>
        </div>
    </main>

    <script src="js/jquery-1.11.2.min.js"></script>
    <script src="js/szkrypt.js"></script>
</body>
</html>

还有jQuery。我通过书中的课程做到了这一点，在那里它奏效了，也许那里有 css 类的东西......或者也许是这样，它是在 jQuery 的旧版本下完成的。

$(document).ready(function() {
 $('.answer').hide();
 $('.faq h2').toggle(
        function() {
           $(this).next('.answer').slideDown();
        },
        function() {
           $(this).next('.answer').fadeOut();
      }
    );
});

Answer 1

您尝试使用的切换功能已弃用并已删除！

jQuery 中唯一剩下的 toggle() 功能是切换可见性的功能，这就是它隐藏所有内容的原因。

$('.faq h2').toggle();

... 隐藏每个可见的 h2 元素，并显示每个隐藏的 h2 元素

您必须创建自己的切换

$('.answer').hide();
$('.faq h2').on('click', function() {
    var flag = $(this).data('flag');

    if ( !flag ) {
       $(this).next('.answer').slideDown();
    } else {
      $(this).next('.answer').fadeOut();
    }

    $(this).data('flag', !flag);
});

此外，删除头部正在加载 jQuery 的脚本标签，一次就够了！

jQuery hide() 隐藏了它不应该隐藏的东西

jQuery hide() hides what it shouldn't

html

jquery

hide