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>

查询：

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

这是JSFiddle

我还尝试了最接近或儿童之类的功能，可能实施不好，但没有成功。

在我的示例中，只有两个主列表，但在应用程序中列表的数量是可变的（所以我不能真正使用索引）。

如何只显示与点击相关的列表？

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 回答
2

你可以这样做：

$('.filename img').click(function () {
    $(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`
});

小提琴演示#1

你也可以试试这个：

$('.filename img').click(function () {
    $(this).closest('li').next('.datalog').show().siblings('.datalog').hide();
});

小提琴演示#2

于 2013-07-23T12:26:03.843 回答
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 回答
0 
$('.filename img').click(function () {
    $(this).closest('li').next(".datalog").show();
});

演示----> http://jsfiddle.net/Lnxdf/2/

于 2013-07-23T12:22:13.260 回答
0

http://jsfiddle.net/Lnxdf/9/

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

虽然我不太喜欢这样的结构

于 2013-07-23T12:24:50.097 回答
0

使用此代码：

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

http://jsfiddle.net/Lnxdf/6/

于 2013-07-23T12:25:31.273 回答