Question

我有这个代码，当我按下带有元素的链接时，我想用类名称选项卡隐藏ul并显示带有类tab-1的ul而不隐藏两个ul元素。我尝试过jquery但是没有成功。 jQuery代码如下。 $("a").click(function() { $(".tab").hide("slide", {direction: "left"}, "slow"); $(".tab-1").show("slide", {direction: "left"}, "slow"); }); 我该怎么办？

<ul class="tab">
    <li>
        <a href="#">Link 1</a>
        <ul class="tab-1">
            <li>List 1</li>
            <li>List 2</li>
        </ul>
    </li>
</ul>

Answer 1

您无法显示设置为display:none的元素的子项。如果没有显示父母......父母内部的任何内容都不能

但是，您可以在父级上设置visibility:hidden，在后代上设置visibility:visible

.tab   {visibility:hidden}
.tab-1 {visibility:visible}

请注意，这是非常罕见的做法。这将有助于更好地描述你想要实现的目标

的 DEMO

Answer 2

只需隐藏与.tab > li > a匹配的所有元素。

演示：

＆＃13;

.tab, .tab ul {
    list-style-type: none;
}

.tab > li > a {
    display : none;
}

＆＃13;

<ul class="tab">
    <li>
        <a href="#">Link 1</a>
        <ul class="tab-1">
            <li>List 1</li>
            <li>List 2</li>
        </ul>
    </li>
</ul>

＆＃13;

使用html的导航器无法运行javascript

2 个答案: