Question

有些人帮我解决了我的最后一个问题，对此我非常感激。不幸的是，我在Internet Explorer上遇到了一系列奇怪的问题。

这是我的代码，当您点击Family列表项时，它的背景将扩展到孩子们。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $("#flip_1").click(function() {
                    $("#panel_1").slideToggle("slow");
                }); 
            });
        </script>

        <style type="text/css">
            .navigation ul {
                font-size: 12px;
                list-style-type: none;

                padding: 0; 
                margin: 0; 
            }


            .navigation {
                float: left;
                width: 200px;
            }

            .navigation li {
                background-color: #F5F2EE;
                background-position: left top;
                background-repeat: no-repeat;
                border: 1px solid #E9E3DD;
                height: auto;
                margin-bottom: 4px;
                padding: 4px 5px 4px 20px;
            }

            .navigation li:hover {
                background-color: #DEB887;
                cursor: pointer;
            }

            .nodisplay {
                display:none; 
            }
        </style>
    </head>

    <body>
        <div class="navigation">
            <ul>
                <li><a href="">First</a></li>
                <li><a href="">Second</a></li>
                <li><a href="">Other Things</a></li>
                <li><a href="">Process</a></li>

                <li id="flip_1">
                    <span>Family</span>
                </li>

                <div id="panel_1" class="nodisplay">
                    <ul>
                        <li> First</li>
                        <li> Second</li>
                    </ul>
                </div>

                <li>More</li>
            </ul>
    </body>
</html>

无论如何，li下的family个孩子可能会像其他项目一样出现，而不是被family背景颜色所包围？这种奇怪的行为只发生在Internet Explorer的兼容性视图中。

Answer 1

实际上这也适用于其他浏览器。如果您希望它仅影响直接子节点而不是所有后代，则需要将.navigation li选择器更改为.navigation＆gt; li选择器。我想那就是你要求的东西？

IE中的Jquery问题

1 个答案: