0

状況は次のとおりです。ナビゲーションバーにネストされたulリストがあります。つまり 

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

これは私のタイルの左側にあるナビゲーション バーで、右側にはそれに関連するコンテンツがあります。

そのため、ネストされたliを選択するたびに、特定のli(ネストされていないメイン)が開かれるようにします。どのようにそれを行うには、css または javascript を使用します。

PS: 私は初心者の Web 開発者なので、簡単な解決策を提案してください。この質問が以前に尋ねられた可能性がありますが、簡単な答えが見つからないので、低く評価しないでください。ありがとう

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