Question

我正在尝试构建一个常见问题解答页面，并希望让用户点击一个问题，然后只有问题才能回答问题。当我把它全部放在一个页面上时，我有一些代码可以解决这个问题。但是我希望使用div来加载各种文件（FAQ div只是我希望添加到div中的几个文件中的一个）。所以，当我使用div和一个＆＃39;窗口onload事件＆＃39; div加载但所有问题和答案都完全打开并暴露出来。下拉答案的脚本，放在MainPage.html的HEAD部分，也是对jQuery的调用。

<script type="text/javascript">
$(document).ready(function() {
    $('#faqs h1').each(function() {
        var tis = $(this), state = false, answer = tis.next('div').hide().css('height','auto').slideUp();
        tis.click(function() {
            state = !state;
            answer.slideToggle(state);
            tis.toggleClass('active',state);
        });
    });
});
</script>

FAQ.html

<div id="faqs">    
    <h1>+ Question</h1>
    <div>
        <p><br>Answer Here</p>
    </div><br>

    <h1>+ Question</h1>
    <div>
        <p><br>Answer Here</p>
    </div><br>

</div>

加载div的脚本，放在MainPage.html的HEAD部分

<script>
    window.onload = function(){
        $('#target').load('FAQ.html');
    }
</script>

div，放在MainPage的BODY部分

<div id="target"></div>

我尝试将javascript放在页面的不同位置，但结果仍然相同。重复：如果我将FAQ.html的代码直接放在MainPage的BODY部分，那么一切正常。

我也在jQuery＆＃39;之间进行了研究。但没有成功。建议赞赏。

Answer 1

看起来很像$(document).ready在$('#target').load完成之前运行为避免这种情况，请将传递给$(document).ready的整个函数改为as a last argument to $('#target').load，然后在FAQ.html加载完成后调用它：

window.onload = function(){
    $('#target').load('FAQ.html', function() {
        $('#faqs h1').each(function() {
            var tis = $(this), state = false, answer = tis.next('div').hide().css('height','auto').slideUp();
            tis.click(function() {
                state = !state;
                answer.slideToggle(state);
                tis.toggleClass('active',state);
            });
        });
    });
}

Answer 2

我认为是因为

$(document).ready()

回调。您已经指定了加载DOM时要发生的功能，但是当您加载到faq.hmtl文件中时，已经发生。看看如果删除脚本标记中的第一行和最后一行会发生什么。

此外，无关，您错误地使用了<h1>代码。作为规则，每页只应有一个<h1>标记。在这种情况下，<dl>标签可能是最具语义意义的。

javascript不影响div

2 个答案: