Question

我遇到了一个令我困惑的问题。我正在编写一个基于网络的工具，在网页上，我有一个公告，点击后会显示或隐藏最近的更新 - 即下面代码中的“点击查看/隐藏公告”。这曾经有用，但在几个版本之后，现在它在点击时不会显示更新。在并行网页中，相应的部分可以毫无问题地显示/隐藏更新。我甚至复制了相应的部分（代码很烦）并放入我的页面，它仍然无效。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="mydc.css" />
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="thickbox-compressed.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
        <script type="text/javascript">
            // some javascript functions here
        </script>
    </head>

    <body>
        <div id="title"><h1>My tool</h1></div>
        <table id="bulletin" class="invis">
             <tr class="invis">
                 <td class="invis">
                     <div id="bulletinslider">
                         <a style="color:red;">
                             Updated 2013.05.04 (Click to view/hide bulletin)</a><br/><br/>
                     </div>
                     <div id="updates" style="display:none;">
                         <u>New changes</u>
                         <ul>
                             <li>some update aaa bbb.</li>
                         </ul><br/>
                         <u>Previous changes</u> (2012.11.27)
                         <ul>
                             <li>some update ccc ddd.</li>
                             <li>some update eee fff.</li>
                             <li>some update ggg hhh.</li>
                             <li>some update iii jjj<br/></li>
                         </ul><br/>
                         <u>Announcements</u>
                         <ul><li>None.</li></ul><br/><br/>
                     </div>
                 </td>
             </tr>
         </table>
    <!-- html code with php scripts continue -->
    </body>
</html>

在css文件（mydc.css）

中

.invis {
    background-color:inherit;
    border-style:none;
}

为什么点击公告不起作用？另外，我不太了解如何触发公告点击。谢谢你的帮助！

Answer 1

我认为您在JavaScript代码中错过了click个事件。请检查您的代码是否存在。您可以构建一个click事件来切换您的更新信息元素，如下所示：

$("#bulletinslider a").click( function () {
    //will either show or hide updates div depending on its state currently
    $("#updates").toggle(100);
});

CSS无法执行显示和隐藏其原生作用域中的其他元素等操作。

因此，请务必检查js click事件。有关该点击事件的更多文档，请转到jquery.com。同时“阅读event delegation

单击HTML以查看和隐藏公告

1 个答案: