0

情况是这样的:我的导航栏中有一个嵌套的 ul 列表,即

<li>
<ul>
<li>
 Some link
</li>
</ul>
</li>
</ul>

这是我的瓷砖左侧的导航栏,右侧有与之相关的内容。

所以我希望每当我选择一个嵌套的 li 时打开一个特定的 li(主要不是嵌套的)。如何做到这一点,以任何方式css或javascript。

PS:我是一个菜鸟网络开发人员,所以请提出简单的解决方案,这个问题以前可能已经被问过,但我找不到一个简单的答案,所以请不要给它低分。谢谢

4

1 回答 1

0

如果你想在点击时显示它,你可以使用 CSS 伪元素:target。这就是你基本上必须做的:

您的 HTML 标记:(给每个父 LI 一个唯一的 ID 和该元素的锚点内的元素)

<ul class="menu clearfix">
    <li id="a">
        <a href="#a">Item 1</a>
        <ul class="clearfix">
            <li><a href="#">Item 1.1</a></li>
            <li><a href="#">Item 1.2</a></li>
        </ul>
    </li>
    <li id="b">
        <a href="#b">Item 2</a>
        <ul class="clearfix">
            <li><a href="#">Item 2.1</a></li>
            <li><a href="#">Item 2.2</a></li>
        </ul>
    </li>
    <li id="c">
        <a href="#c">Item 3</a>
        <ul class="clearfix">
            <li><a href="#">Item 3.1</a></li>
            <li><a href="#">Item 3.2</a></li>
        </ul>
    </li>
</ul>

CSS:

/* basic menu styling */
ul.menu {
    position:relative;
}

ul.menu li {
   display:block;
   position:relative;
   float:left;
}

ul.menu a {
  display:block;
  text-decoration:none;
}

ul.menu > li {
    border:1px solid #000;
    min-width:100px;
    margin-left:-1px;
}

/* set up nested ul's and hide them */
ul.menu > li ul {
    display:none;
    position:absolute;
    width:100%;
    top:0;
    left:0;
}

/* show them on click */
ul.menu > li:target ul {
    display:block;
}

ul.menu > li > ul > li {
    float:none;
    display:block;
}

我组装了一个小小提琴进行演示

于 2013-03-18T07:53:41.243 回答