0

親ノードが展開されたときに子ノードをリストするネストされたリストがあります。テキストの左側にあるイメージをクリックすると、親ノードが展開されます。

残念ながら、ページからすぐに展開されます。コンテンツがページからはみ出したときにスクロールバーが表示されるようにしたいと考えています。

「overflow: auto」を設定すると、スクロールバーがポップアップすることはなく、ページの外に展開され、リスト項目の左側にある展開画像が削除されます。

サンプルの .html は次のとおりです。

<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 は次のとおりです。

#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;
}
4

2 に答える 2

0

まず、コンテナ div の明確な幅を設定して、いつスクロールを開始するかを認識します。次に、overflow-x:scroll; に設定します。またはその趣旨の何か。それはうまくいくはずです:)

于 2009-08-06T23:22:37.537 に答える
0

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

私はそのようなn00bです。

于 2009-08-07T20:41:21.827 に答える