Question

我有一个无序列表：

<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中执行此操作，以便我不必手动从主列表中拆分子列表？

Answer 1

您可以通过使用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);

Answer 2

如果您要做的只是阻止某些子列表出现，那么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;
}

除了“服务”部分之外，所有页面中都会隐藏该子列表。

在不同的DIV中显示子无序列表

2 个答案: