我有问题...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/