Question

我是jquery的新手，我正在尝试使用Jquery书中的常见问题解答练习，但它只显示点击时的常见问题解答，当我们再次点击它时，它会被隐藏但是它不会

$(document).ready(function() {
    dynamicFaq();
});

   function dynamicFaq() {
        $('dd').hide();
        $('dt').bind('click', function(){
            $(this).next().show();
        });
        $('dt').bind('click', function(){
            $(this).next().toggle();
        });
   }

谢谢大家。书籍练习是这个=＆＃34; 6。现在我们已经从问题转到了答案。现在剩下要做的就是秀答案：

$('dt').bind('click', function(){
$(this).next().show();
});

不要忘记我们的dynamicFaq函数在我们调用它之前不会做任何事情。呼叫文档就绪语句中的dynamicFaq函数：

（文档）$。就绪（函数（）{ dynamicFaq（）; }）;
现在，如果我们在浏览器中加载页面，您可以看到我们的所有答案都是隐藏，直到我们点击问题。这很好用，但它会很均匀如果网站访问者在完成阅读后再次隐藏答案，那就更好了把它弄出来的。幸运的是，这是一个很常见的任务，jQuery非常有用对我们来说很容易我们所要做的就是用调用替换对.show（）方法的调用到.toggle（）方法如下：

$（＆＃39; dt＆＃39;）。bind（＆＃39;点击＆＃39;，function（）{ $（本）。接下来（）切换（）。 }）;＆＃34;

Answer 1

 function dynamicFaq() {
        $('dd').hide();
        $('dt').bind('click', function(){
            $(this).next().show();//showing
        });
        $('dt').bind('click', function(){
            $(this).next().toggle();//hiding
        });
   }

所以，永远不会表现出来。

就这样做：

 function dynamicFaq() {
        $('dd').hide();
        $('dt').bind('click', function(){
            $(this).next().toggle();//hide or show
        });
   }

Answer 2

试试这段代码：

$(document).ready(function() {
    $('dd').hide();
    $('dt').click(function(){
        $(this).next().toggle();
    });
});

Answer 3

您可以将元素绑定在$（document）.ready（）中，无需再次调用函数。

试试这个：

$(document).ready(function() {
    $('dd').hide();
    $('dt').click(function() {
        $('dd').toggle();
    });
});

切换显示和隐藏不工作

3 个答案: