Question

我正在尝试使用jQuery来切换某些元素的类，但是当我从local server website运行代码时，它是空白的，没有任何内容。

jsfiddle上的工作示例。

HTML：

<span class="close_button">x <div class="comment_report">Click!</div></span><br>
<span class="close_button">x <div class="comment_report">Click!</div></span><br>

CSS：

.comment_report{
    visibility:hidden;
}
.visible{
    visibility:visible;
}

JS：

$(document).ready(function() {
    $(".close_button").click(function() {
        $(this).children(".comment_report").toggleClass("visible");
    });
});

Answer 1

您的结束样式标记上有一个拼写错误（在屏幕截图中）。我认为这可能导致页面空白

Answer 2

这不应该（必然）导致网站无法在您的浏览器中呈现，但您的标记在语义上是向后的：您在<div>标记内嵌套<span>。最好让你想要显示的块，以及“关闭”按钮（实际上是一个切换按钮）在div内部，如下所示：

<div id="block1">
    <span class="close_button">x</span>
    <div class="comment_report">Click!</div>
</div>
<div id="block2">
    <span class="close_button">x</span>
    <div class="comment_report">Click!</div>
</div>

然后，不要将comment_report div作为子项引用，而是将其作为兄弟引用，如下所示：

$(document).ready(function() {
    $(".close_button").click(function() {
        $(this).siblings(".comment_report").toggleClass('.visible');
    });
});

我在这里创建了一个jsFiddle的分支：http://jsfiddle.net/qJ3T7/

虽然这个答案没有直接解决您的问题，但糟糕的标记会影响某些浏览器呈现您的内容的能力，所以这是一个开始。您可以尝试在HTML中添加doctype声明，以查看是否有助于渲染。

您在屏幕截图网站上发布的HTML是HTML编写的，还是由本地服务器提供的？换句话说，值得检查以确保服务器正确地提供内容。标准（非JS）HTML页面显示正常吗？您也没有提到您测试过哪些浏览器 - 它们都是空白的吗？

编辑：

刚看到黄教的回答，就必须如此。我仍坚持认为你的加价可以调整，但绝对不会导致你的错误。每当页面不呈现时，您一定要考虑通过HTML验证器传递它，例如w3验证器：http://validator.w3.org/。那会发现你的错误！

我正在尝试使用jquery来更改某些元素的类，但是当我运行代码时，我的网站是空白的

2 个答案:

编辑：