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の絶対位置を使用して、アクティブなサブメニューを常に左側に向けることで、これを実現できます。

/*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 に答える
0

いくつかの子リストが表示されないようにするだけの場合は、CSSに洗練されたソリューションがあります。

display：noneを使用してすべての子リストを非表示にしてから、bodyタグにクラスを適用できます。そうすれば、Webサイトの特定のセクションで特定の子リストを選択的に非表示/表示できます。

例えば：

<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 に答える