ツリーメニューがスクロールしない

親ノードが展開されているときに子ノードをリストする入れ子リストがあります。テキストの左側にあるイメージをクリックすると、親ノードが展開されます。ツリーメニューがスクロールしない

残念ながら、このページからすぐに拡張されます。コンテンツがページ外に出ると、スクロールバーが表示されます。

"overflow：auto"を設定すると、スクロールバーがポップアップすることはありません。ページ外に展開され、リストアイテムの左側にある拡大イメージが削除されます。

<body> 
    <div id="theDiv" style="clear: left;"> 
    <ul id="theList"> 
     <li id="1" class="parent"> 
     <img class="expanded" align="absmiddle" src="./tree_expanded.gif"/> 
     Parent1 
     <ul style="display: block;"> 
      <li id="10"> 
      ..... 
     </ul> 
     </li> 
     .... 
    </ul> 
    </div> 
</body>

ここ

だサンプルの.js：

function expand() { 
    if(this.className == "expand") { 
    jQuery(this.parentNode).children("ul").show(); 
    this.className = "expanded"; 
    this.src = "/_images/tree_expanded.gif"; 
    } 
else { 
    jQuery("ul", this.parentNode).hide(); 
    this.className = "expand"; 
    this.src = "/_images/tree_unexpanded.gif"; 
} 
}

ここにありますサンプルの.css：ここ

はサンプル.htmlのだすべての

#theList { 
    margin-top: 0; 
} 

#theList, #theList ul { 
    list-style: none; 
    margin: 5px 20px; 
    padding: 0; 
} 

#theList .expand, #theList .expanded { 
    margin-left: -20px; 
    cursor: pointer; 
} 

#theList img { 
    margin-right: 5px; 
} 

#theList ul { 
    display: none; 
} 

#theList li { 
    white-space: nowrap; 
    margin-bottom: 4px; 
}

出典

2009-08-06 Anonymous

私が試したことは言及しませんでした。最初はdivの高さを特定のものに設定し、overlfow-y：autoとscrollを設定します。まだ同じ結果があった –

私はそれが全く同じ結果を持っていたと言ったとき私は急いでいた。高さを追加してdivとリストにスクロールすると、スクロールバーが表示されました。しかし、拡大画像は消える。 –

まず、の明確な幅を設定コンテナのdiv、それはいつスクロールを開始するかを知っています。次に、overflow-x：scrollに設定します。またはそのようなものへの何か。それは動作するはずです：

出典

2009-08-06 23:22:37 Salty

私は正しい軌道にあったが、十分な持続性がありませんでした。 CSSは本当に私をナットしてくれる。スクロールするにはdivとリストの高さを設定する必要があります。私はどちらか一方を試していたが、両方を試していなかった。

私はそのようなn00bです。

出典

2009-08-07 20:41:21

新しい問題が発生しました。 Firefoxは正常に動作しますが、イメージの表示が停止してしまい、展開されません –

ツリーメニューがスクロールしない

答えて

関連する問題