0

<ol>JQueryを使用してリンクをクリックすると、表示と非表示（トグル）を切り替えようとしています。私のHTMLは

 <ol id="sortable" class="sortable">
    <li>
       <div>
          <span class="drag-image groupimage">&nbsp;</span>
          <a class='expand'>{{ portfolio_group.name }}</a>
       </div>
     <ol style="display: none; margin:0px" id={{ portfolio_group.id }}>
         <li>
            <div class="patent-div">
               <span style="" class="drag-image patentimage">&nbsp;</span>
               <a class="patent-name" href='{{ path('v2_pm_patents_edit', { 'patentId': patent.id }) }}'>{{ patent.patentName }}</a>
            </div>
     </ol>
 </ol>

内部の ol が非表示になっているため、class = expand のリンクをクリックするとトグルするようにしたいと考えています。

これまでに試したこと

 $(document).ready(function(){
    $('.expand').click(function() {
        $(this).nextAll('ol').eq(0).slideToggle('fast');
    });

});

しかし、それは機能していません

ありがとう

4

3 に答える 3

0

あなたのコードの問題は、nextAll が現在のセレクターの兄弟に対してのみ dom を検索することですが、あなたの例は、展開したい OL が div に含まれるクリックされたアイテムから分離されていることを示しています。

私は JSfiddle でソリューションを作成しました。これは、例の html 構造が本番環境で変更されない場合 (つまり、展開する OL は、クリック可能なリンクを含む親の「div」の直後に常に続きます) が機能するはずです。

フィドルへのリンクはここにあります-

http://jsfiddle.net/2LQJe/11/

私が使用したコードは次のとおりです。

$(document).ready(function(){

    $('.expand').click(function() {
        $(this).parents('div').next('ol').slideToggle('fast');
    });

});

これが機能する理由は、最初に dom ツリーを上って、展開したい要素の兄弟である要素 (この場合は div) を見つけ、次にこの兄弟セットを反復処理する必要があるためです。あまり柔軟ではありません。

編集また、展開したい ol の直後の li が閉じられていないという小さなエラーが html 構造にあることに気付きました。これを修正するには、「patent-div」ノードの後に​​終了 () タグを配置する必要があります。

于 2012-08-02T14:56:51.133 に答える
0

この動作中の jsfiddleを確認してください。

$(".expand").click(function() {
   $(this)
       .parent()
       .nextAll('ol')
       .eq(0)
       .slideToggle('fast');
});
于 2012-08-02T14:43:05.430 に答える
0

この.nextAll()関数は、呼び出された jQuery オブジェクト内の要素の兄弟を調べます。ただし、<ol>切り替えたい は<a>、クリック イベントをトリガーしている要素の兄弟のようには見えませんが、代わりに<div>を含む要素の兄弟です<a>。

<div>関数を使用して DOM を親までたどり.parent()、次を呼び出すことができます.nextAll()。

$(this).parent().nextAll('ol').eq(0).slideToggle('fast');
于 2012-08-02T14:43:31.120 に答える