0

すべてのアイテムにサブリストがあるリストがあります。それらのスタイルを設定するために、CSSを使用しました。

<ul class="left">
    <li class="itemc">Item 1
        <ul class="subitem">
            <li>Subitem1</li>
            <li>Subitem2</li>
            <li>Subitem3</li>
            <li>Subitem4</li>
        </ul>
    </li>
    <li class="itemc">Item 2
        <ul class="subitem">
            <li>Subitem1</li>
            <li>Subitem2</li>
            <li>Subitem3</li>
            <li>Subitem4</li>
        </ul>
    </li>
    <li class="itemc">Item 3
        <ul class="subitem">
            <li>Subitem1</li>
            <li>Subitem2</li>
            <li>Subitem3</li>
            <li>Subitem4</li>
        </ul>
    </li>
    <li class="itemc">Item 4
        <ul class="subitem">
            <li>Subitem1</li>
            <li>Subitem2</li>
            <li>Subitem3</li>
            <li>Subitem4</li>
        </ul>
    </li>
</ul>

スクリプト全体はここにあります

私の問題は、メインリストの項目を押すと、サブリストが表示されますが、メインリストの他の項目が次々に表示されることです。それを機能させるには、どのように、または何を変更する必要がありますか？つまり、アイテムをクリックすると、サブリストが表示され、次のアイテムがサブリストの最後に配置されますか？

4

2 に答える 2

1

.left liクラスに2つのプロパティを追加します。

.left  li {
    float: left;
    clear: left;
}

jsfiddleを更新しました

于 2013-01-23T16:54:12.797 に答える
0

問題は、サブアイテムが開いたときにアイテムの位置が変更されないという事実に起因します。彼らは同じ場所にとどまります。

Firefoxからの3Dビュー

ここでわかるように（Firefoxからの3Dビュー）、アイテム3と4は元の場所（アイテム2がクリックされた）のままであり、サブアイテムはそれらの上にあります。

サブアイテムは、実際にはアイテムに含まれているとは見なされません。そのため、表示されているとき、他のアイテムはその上のアイテムに変更がないことを確認し、同じ場所にとどまります。ただし、テキストはサブメニューの影響を受けます。そして、それはそれの終わりに置かれます。これはすべて、サブアイテムのfloat: left;に起因します。

これを修正するには、CSSにclear: both;またはclear: left;を追加する必要があります。.left li

編集：私は遅れて申し訳ありません...

ちょっとした注意：.left li後は避けて.left .submenu liください。前に置いたプロパティの一部が置き換えられる可能性があります。

于 2013-01-23T17:06:44.060 に答える