Question

我正在开发一个模板。这样做时，我遇到了一个错误。我已经放置了一个按钮，可以将侧边栏从不可见状态切换到可见状态。我使用了正确的代码来启动jquery响应。但侧边栏没有切换。帮我解决这个问题

HTML

<a id="click-slide">
<span>
          \
        </span>
</a>

的Javascript

<script type="text/javascript">

//<![CDATA[

    $("#posts-container,a#click-slide").click(function() {
        $("#topbar #category").removeClass("category-list-move")
    });
    $("a#click-slide").click(function() {
        $("#sidebar").toggleClass("sidebar-move");
        $("#topbar").toggleClass("topbar-move");
        $("#posts-container").toggleClass("posts-container-move")
    });
    //]]>
    </script>

My site

我在使用和不使用Cdata时使用过它。我哪里出错了

Answer 1

您没有将您的代码包装在document.ready事件处理程序中。把它改成这个......

jQuery(function($) {
    $("#posts-container,a#click-slide").click(function() {
        $("#topbar #category").removeClass("category-list-move")
    });
    $("a#click-slide").click(function() {
        $("#sidebar").toggleClass("sidebar-move");
        $("#topbar").toggleClass("topbar-move");
        $("#posts-container").toggleClass("posts-container-move")
    });
});

它试图在加载页面之前分配click事件处理程序，因此当时没有任何元素存在。如上所述，在ready处理程序中包装意味着它只会在页面加载完成后运行脚本。

Answer 2

您应该将您的javascript代码放入document.ready。 document.ready背后的原因是你把你的javascript代码放在＃click-side元素之前。这意味着当你的javascript被执行时，在页面中没有名为＃click-side的元素。当我们放入document.ready时，它会轻轻地下载你的javascript和所有文档，然后开始执行你的javascript代码。

<script type="text/javascript">

//<![CDATA[
$(document).ready(function(){
    $("#posts-container,a#click-slide").click(function() {
        $("#topbar #category").removeClass("category-list-move")
    });
    $("a#click-slide").click(function() {
        $("#sidebar").toggleClass("sidebar-move");
        $("#topbar").toggleClass("topbar-move");
        $("#posts-container").toggleClass("posts-container-move")
    });
});
    //]]>
    </script>

Answer 3

文档准备好后添加了代码。

<script type="text/javascript">
   $(document).ready(function(){
    $("#posts-container,a#click-slide").click(function() {
        $("#topbar #category").removeClass("category-list-move")
    });
    $("a#click-slide").click(function() {
        $("#sidebar").toggleClass("sidebar-move");
        $("#topbar").toggleClass("topbar-move");
        $("#posts-container").toggleClass("posts-container-move")
    });
});
   </script>

尽管使用内联javascript，补充工具栏切换仍无法正常工作

3 个答案: