0

CSS：

#divMainMenu ul {
    list-style-type: none;
    padding: 5px 0;
    height:400px;
}
#divMainMenu li {
    height: 17px;
    margin: 3px 0;
    padding: 14px 2px;
    border: 1px solid #eee7cb;
    background: url(../../Images/50pTransparent-20x20.png) repeat;
}
#divMainMenu li ul{
    display: none;
}

HTMLとスクリプト：

<script type="text/javascript">
function Show(pObj)
{
pObj = document.getElementById(pObj).id;
if (document.getElementById(pObj).style.display=='none')
    document.getElementById(pObj).style.display='block';
else
    document.getElementById(pObj).style.display='none';
}
</script>
<div id="divSidePanel">
    <div id="divMainMenu">
        <ul>
            <li onclick="Show('Buyers')">Buyers
                <ul id="Buyers" style="display:none;">
                    <li>Search</li>
                    <li>Submit request</li>
                    <li>Send message to owner</li>
                </ul>
            </li>
            <li>Sellers</li>
            <li>Contact Us</li>
        </ul>
    </div>
</div>

問題：「購入者」というテキストをクリックすると、サブ/ネストされたリストが表示されます。ただし、他のアイテムはネストされたリスト用のスペースを作成しません。したがって、ネストされたリストはメインリストのスペースに上書きします。

これは私のコードの問題ですか、それともそれが機能するための標準的な方法ですか？そして、他のアイテムを「プッシュダウン」させて、ネストされたアイテムに道を譲る方法はありますか？

ありがとう！

4

2 に答える 2

2

CSSmin-height:で：の代わりに使用する必要があります。heightjQueryを知っている場合は、.hide（）関数と.show（）関数の方がはるかにうまく機能します。

于 2012-05-11T14:20:00.490 に答える
1

これをCSSから取り出します。

#divMainMenu li ul{
    display: none;
}

そして、セレクターでheightプロパティをmin-heightに変更します#divMainMenu li

結果のcss：

#divMainMenu ul {
    list-style-type: none;
    padding: 5px 0;
    height:400px;
}
#divMainMenu li {
    min-height: 17px;
    margin: 3px 0;
    padding: 14px 2px;
    border: 1px solid #eee7cb;
    background: url(../../Images/50pTransparent-20x20.png) repeat;
}
#divMainMenu li ul{

}​

例

于 2012-05-11T14:24:19.903 に答える