html - 列出在其他元素下呈现的元素。 IE7 CSS HTML

Question

我有一个使用以下代码的菜单栏，当单击标题列表项时，它们会调用 showHide 函数将内部列表的类更改为带有显示 block 而不是无显示 block 的类。

在 ie6 和 ff 上它工作正常，chrome opera 等。但在 ie7 上，内部列表在主列表中的其他元素下呈现。我尝试的一切似乎都打破了其他浏览器。

非常感谢任何帮助。

<ul id="FOOMENU" style="list-style-type: none; padding-left: 10px; text-decoration: none;">   
<li class="navItemsHeader"><b>View by..</b></li>

<li>
<b><a style="text-decoration:none;" href="javascript:void(0);" onclick="showHide('foobarMenu');">foobar..</a></b>
</li>

<li id="foobarMenu" class="hideMenu">
                                <ul style="list-style-type:none; padding-left:10px; text-decoration:none; ">
                                    <li>DYNAMIC LIST OF LINKS HERE.</li>

                                </ul>
</li>

Answer 1

我会掌握像 jQuery 这样的 javascript 库，因为它会为您处理所有跨浏览器问题，并具有诸如 toggle() 等有用的方法来显示和隐藏元素。

jQuery 代码应该是这样的

$(".hideMenu").click(function() {
    $(this+"> ul").toggle();
});

另外，如果你想隐藏之前显示的子菜单，你可以使用这个:

$(".hideMenu").click(function() {
    $(".hideMenu > ul").hide();
    $(this).children("ul").show();
});