0

私は今ここで本当に立ち往生しており、誰かが私の問題に対する簡単な解決策を考えられるかどうか知りたいと思っていました. それぞれにいくつかのネストされた<ul>アイテムがいくつか<li>あり、次のようにしたい：

あるアイテムをクリックし<li>て別のアイテムが含まれている<ul>場合は常に、下にスライドしてすべてのリストアイテムを表示し、同時に同じ「ネストレベル」の他のリストを閉じる必要があります。私はこれを実現しようとしましたが、考えられるすべての星座に対してコードを書きたくないので、もっと簡単な方法があると思います。

理解を深めるために: http://jsfiddle.net/7zTc2/1/

どういうわけかこの例は機能しませんが、コンテンツをローカル ファイルにコピーすると機能します。最初の 3 つのリストを作成しましたが、すべての「子」リストでもこのように動作するようにしたいと考えています。誰かが私を助けることができれば、私は本当に感謝しています!

4

1 に答える 1

2

良い一日！あなたの問題から私が理解したことに基づいて、これが私がそれをした方法です：

HTML マークアップ

<ul>
  <li>
    <span>value 1</span>
    <ul>
      <li>
        <span>inner value 1</span>
        <ul>
          <li>inner inner value 1</li>
          <li>inner inner value 2</li>
          <li>inner inner value 3</li>
        </ul>
      </li>
      <li>
        <span>inner value 2</span>
        <ul>
          <li>inner inner value 1</li>
          <li>inner inner value 2</li>
          <li>inner inner value 3</li>
        </ul>
      </li>
      <li>
        <span>inner value 3</span>
        <ul>
          <li>inner inner value 1</li>
          <li>inner inner value 2</li>
          <li>inner inner value 3</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <span>value 2</span>
    <ul>
      <li>inner value 1</li>
      <li>inner value 2</li>
      <li>inner value 3</li>
    </ul>
  </li>
  <li>
    <span>value 3</span>
    <ul>
      <li>inner value 1</li>
      <li>inner value 2</li>
      <li>inner value 3</li>
    </ul>
  </li>
</ul>

CSS

li > ul {
  display: none;
}

JQuery

$("ul > li").has("> ul").click(function(e) {
  e.stopPropagation();
  $(this).find("> ul").slideToggle();
  $(this).siblings("li").find("> ul").slideUp();
});
$("ul > li").click(function(e) {
  e.stopPropagation();
});
于 2013-04-14T23:48:43.773 に答える