0

我只想让每个列表在您单击其前面的跨度时切换进出。现在发生的是单击一个跨度会切换所有列表。我是一个 jQuery 初学者，但我觉得这是一件非常简单的事情，所以我很沮丧，我无法弄清楚。此外，页面上会有很多这样的内容，所以我不想为每个新列表添加一堆代码。

这是我的 HTML：

<span class="rental">123 Main Street</span>
<ul class="rental-det">
    <li>2 bedrooms</li>
    <li>1 bathroom</li>
    <li>New carpets throughout</li>
    <li>All large kitchen appliances included</li>
    <li>In-unit washer and dryer</li>
    <li>Central air</li>
    <li>Dishwasher</li>
    <li>Renter responsible for all utilities</li>
</ul>

<span class="rental">321 Main Street</span>
<ul class="rental-det">
    <li>2 bedrooms</li>
    <li>1 bathroom</li>
    <li>New carpets throughout</li>
    <li>All large kitchen appliances included</li>
    <li>In-unit washer and dryer</li>
    <li>Central air</li>
    <li>Dishwasher</li>
    <li>Renter responsible for all utilities</li>
</ul>

因此，再次，我希望能够单击具有“出租”类的每个跨度并切换紧随其后的列表。

这是我一直在使用的 jQuery：

$(document).ready(function(){
$('.rental').click(function() {
$('.rental-det').slideToggle()
});
});

我还添加display: none;了 .rental-det 类以使它们默认隐藏。

4

2 回答 2

1

改变

$('.rental-det').slideToggle()

至

$(this).next('.rental-det').slideToggle();

jsFiddle 示例

您$('.rental-det').slideToggle()正在选择类的所有列表.rental-det，您想在其中使用$(this)，并.next()选择在单击的跨度之后的列表。

于 2013-08-12T20:32:17.193 回答
0

我会修改 HTML 以将跨度移动到 div 并将详细信息放在这些 div 中。

$('.rental').on('click',function(){
    $(this).children().slideToggle();
});

这将简单地显示和 javascript。

看我的小提琴。 http://jsfiddle.net/LeHMa/

于 2013-08-12T20:40:54.970 回答