2

これは単純な問題のように感じ、かなり検索しましたが、良い答えを思い付くことができません。

divに追加したネストされたULがたくさんあります。クリックしたULを折りたたむことができるようにしたい。問題は、あるULを別のULの内側をクリックすると、実際には両方をクリックしているということです。したがって、最下位の層をクリックして折りたたんで$（this）.css（'height'、 '5px'）のように言うと、最高レベルのULも5pxの高さになります。うまくいけば、コードが私の質問をより明確にするでしょう。

<ul class=t0>
  <li class='item'>Top Item 1</li>
  <li class='item'>Top Item 2</li>
  <li class='item'>Top Item 3 is a list</li>
  <ul class=t1>
    <ul class=t2>
      <li class='item'>some <span class='val'>Thing</span></li>
      <li class='item'>something <span class='val'>else</span></li>
    </ul>
    <ul class=t2>
      <li class='item'>method : <span class='val'>GET</span></li>
      <li class='item'>uri : <span class='val'>/status</span></li>
    </ul>
  </ul>
<li class='item'>Top Item 3 is a list</li>
</ul>

したがって、ULクラスt2をクリックすると、そのt2のみが折りたたまれますが、t1をクリックすると、両方のt2が折りたたまれます。私はCSSを変更する方法を知っており、クリックされたulだけを選択するのに問題があるすべてのものを知っています。.findまたは.closestを使用できると思います。正確な方法がわかりません。

助けてくれてありがとう。

4

4 に答える 4

5 
$('.t1, .t2').click(function(e){
  e.stopPropagation(); //prevent the event from bubbling up
  $(this).slideUp();
});

これは機能しますが、アイデア/マークアップ/実行に欠陥があります。.t12つで構成されているのでクリックする必要はありません.t2-したがって、クリック.t1せずにクリックすることはできません.t2

HTMLも無効です。これは、別のHTMLを子として<ul class='t1'>持つことができないためです。<ul>そこにいくつかのが必要です<li>。

于 2013-03-19T23:55:49.080 に答える
0

event.stopPropagationを使用して、イベントが上位レベルに上がるのを防ぐことができます。http://api.jquery.com/event.stopPropagation/

于 2013-03-19T23:56:20.077 に答える
0

委任して使用e.targetし、クリックされたものを判別して、その$.closest()祖先を見つけることができULます。

マークアップ（更新）

<ul class=t0>
    <li class='item'>Top Item 1</li>
    <li class='item'>Top Item 2</li>
    <li class='item'>Top Item 3 is a list
        <ul class=t2>
            <li class='item'>some <span class='val'>Thing</span></li>
            <li class='item'>something <span class='val'>else</span></li>
        </ul>
        <ul class=t2>
            <li class='item'>method : <span class='val'>GET</span></li>
            <li class='item'>uri : <span class='val'>/status</span></li>
        </ul>
    </li>
    <li class='item'>Top Item 3 is a list</li>
</ul>

jQuery

$('.t0').on('click', function click(e) {
    $(e.target).closest('ul').slideUp();
});

http://jsfiddle.net/userdude/ksVUY/

編集：またはこれはあなたが求めていたものですか？問題は、<ul><ul>が無効なマークアップであるため、マークアップの特定の部分で何をしているかによって異なります。

于 2013-03-20T00:08:02.740 に答える
0

質問に答えるには（実際に求められていたものではないようですが、他の人が質問につまずいて答えを探している可能性があります）、「最も低い」ULを見つけるには、DOMの順序でコレクションを返すgetElementsByTagNameを使用できます。 、およびコレクションの最後の要素を返します（存在する場合）：

function getLowestUL(el) {
  var uls = el.getElementsByTagName('ul');
  return uls.length? uls[uls.length - 1]  : null;      
}

提供された要素がULであり、それが最も低いULである場合にそれを返したい場合は、次のようにします。

function getLowestUL(el) {
  var isUL = el.tagName && el.tagName.toLowerCase() == 'ul';
  var uls = (el.nodeType == 1) && el.getElementsByTagName('ul');
  return (uls && uls.length)? uls[uls.length - 1]  : isUL? el : null;      
}
于 2013-03-20T00:26:43.903 に答える