这种方法会不会造成装载的滞后？

Question

我是jQuery初学者，目前我正在做一些运动，在我学到的每一件事上--这是我开始做jQuery课程的几天时间。

这是我正在处理的jsfiddle http://jsfiddle.net/nPcZJ/示例，

，我想知道是否有更好的方法来达到同样的结果？

然而，我的一个朋友告诉我，如果我们有1000个问题显示在一个特定的页面，我们想显示/隐藏答案的基础上点击问题。

他说这会导致页面加载不足.？

它似乎完美地处理了几个问题。但是，就像他说的1000个问题.？，如果我有1000个问题会导致页面不加载.？，这是真的吗？

$(document).ready(function(){
    $("dt").click(function(){
        var qst = $(this).parent().find('dd');
        $(qst).slideToggle();
    })
})

<dl>
     <dt>Q-1 What is your favorite scripting language ?</dt>
     <dd style="display: none">Ans - PHP, C++ </dd>      
</dl>

<dl>
    <dt>Q-2 What is your favorite IDE software ?</dt>
    <dd style="display: none">Ans - Aptana Studio 3, Dreamweaver</dd></dl>  
<dl>
    <dt>Q-3 Where are you from ?</dt>
     <dd style="display: none">Ans - I am from Russia</dd>  
</dl>

<dl>
    <dt>Q-4 Can you build small scripts - complex scripts ?</dt>
    <dd style="display: none">Ans - Yes, i can build small - complex scripts and from scratch</dd>
</dl>

Answer 1

通过从jQuery直接访问兄弟dd，可以防止event.target.nextElementSibling在大型DOM中遍历/搜索其父和子DOM。

$("dt").click(function(e){
    var qst=e.target.nextElementSibling; // which is same as $(this).next();
    //var qst = $(this).parent().find('dd');
    $(qst).slideToggle();
});

有趣的是，所以也有可能有更短的标记，如

<dl>
    <dt>Q-1 What is your favorite scripting language ?</dt>
    <dd style="display: none">Ans - PHP, C++ </dd>
    <dt>Q-2 What is your favorite IDE software ?</dt>
    <dd style="display: none">Ans - Aptana Studio 3, Dreamweaver</dd></dl>     
</dl>