0

我有一个无序列表：

<ul>
    <li>Home</li>
    <li>Products</li>
    <ul>
        <li>Fruit</li>
        <li>Veg</li>
        <li>Frozen</li>
    </ul>
    <li>Services</li>
    <ul>
        <li>Deliver</li>
        <li>Butchers Shop</li>
    </ul>
    <li>Support</li>
</ul>

哪个输出：

  • 家
  • 产品
    • 水果
    • 蔬菜
    • 冷冻
  • 服务
    • 递送
    • 肉店
  • 支持

我正在尝试在单独的 div 中显示子列表。例如，假设我在产品页面上，我想要这样的东西：

<div class="main-links"><ul><li>Home</li><li>Products</li><li>Services</li><li>Support</li></ul></div>

<?php
if ($_POST['page']=='products') {
    echo "<div class="side-links"><ul><li>Fruit</li><li>Veg</li><li>Frozen</li></ul></div>"
}
?>

是否可以在 CSS/HTML 中执行此操作，这样我就不必手动从主列表中拆分子列表？

4

2 回答 2

0

如果您想要做的只是阻止某些子列表出现，那么 CSS 中有一个优雅的解决方案。

您可以使用 display: none 隐藏所有子列表，然后将类应用于您的 body 标签。这样，您可以有选择地隐藏/显示网站某些部分中的特定子列表。

例如：

<body class="services">
...
<ul class="services-child">
    <li>Deliver</li>
    <li>Butcher's Shop</li>
</ul>

然后在 CSS 中：

.services-child {
display: none;
}
.services .services-child {
display: block;
}

这将在除“服务”部分之外的所有页面中隐藏该子列表。

于 2012-07-10T16:57:49.400 回答
0

您可以通过使用 CSS 绝对定位来实现这一点，始终将活动子菜单指向左侧

/*Make the sub-nav top/left position, relative to the position of this menu*/
#nav{
    position:relative;
}
#nav li{
    float:left;
}
/*The active sub menu*/
#nav li.active ul{
    position:absolute;
    left:0px;
    top:300px;
}

我确信 jQuery 也可以用来从活动菜单创建一个新菜单。我的 jQuery 不是很好，但可能是这样的：

var menuhtml= $("#nav li.active ul").html();
$("#sidebarmenu").html(menuhtml);
于 2012-07-10T16:47:48.583 回答