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（）隐藏了它不应该的东西

1 个答案: