0

ユーザーが特定のアイコンをクリックすると、リスト内にリストを表示しようとしています。これが私のコードです。

HTML :

<li class="filename"><img src="expand.png" /> Lorem ipsum dolor sit amet</li>
<ul class="datalog">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
</ul>
<li class="filename">
<img src="expand.png" /> Lorem ipsum dolor sit amet</li>
<ul class="datalog">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
</ul>

Jクエリ：

$('.filename img').click(function () {
    $('.filename').next(".datalog").show();
});

そして、ここにJSFiddleがあります

私はまた、最も近いまたは子のような機能を試しましたが、おそらく実装が不十分でしたが、成功しませんでした。

私の例ではメイン リストは 2 つしかありませんが、アプリケーションではリストの数は可変です (そのため、実際にはインデックスを使用できません)。

クリックに関連するリストのみを表示するにはどうすればよいですか?

4

6 に答える 6

4

thisリファレンスを使用

$('.filename img').click(function () {
   $(this).parent().next(".datalog").show();
});

説明

$(this)-->current clicked element , which is img
parent()--> go to parent which is `li`
.next(".datalog") --> go to the next element whose class is `.datalog`, that is `ul` 
.show()  -->show

ここでフィドル

于 2013-07-23T12:21:24.100 に答える
0

これを試してください 完全なプロセスのために

$(document).ready(function(){

    $('.filename img').click(function () {
        if( $(this).closest('li').next('.datalog').is(':hidden')) {
        $(this)                   // Get the current img being clicked
             .closest('li')       // Go to the closest parent `li` to the img
             .next('.datalog')    // Go to the next sibling of the `li`
             .show();             // Show the `ul` with the class `.datalog`
        } else {
               $(this)                   // Get the current img being clicked
             .closest('li')       // Go to the closest parent `li` to the img
             .next('.datalog')    // Go to the next sibling of the `li`
             .hide();             // Show the `ul` with the class `.datalog`
        }
    });
});
于 2013-07-23T12:33:28.357 に答える