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

标签 jquery html hide

我有问题...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。我通过书中的类(class)做到了这一点,在那里它奏效了,也许那里有一些带有 css 类的东西......或者也许是这样,它是在旧版本的 jQuery 下完成的。

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

最佳答案

您尝试使用的切换功能已被弃用并移除!

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() 隐藏了它不应该隐藏的东西,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28020961/

相关文章:

javascript - jquery 显示超时倒计时输出

html - 嵌套的 flexbox 组

php - wp_bootstrap_navwalker 移动菜单问题

php - 使用 PHP 创建搜索过滤器

javascript - 如何使用ajax交换两个表格单元格值并更新到数据库中

jquery 隐藏嵌套列表中的子项

jquery - 动态追加元素到 jQuery Mobile ListView

jquery - 使用 jQuery 在点击时显示 div #id

ios - 计时器显示/隐藏 subview

安卓。隐藏某些 ListView 分隔符