Question

我想要的是每个列表在您单击其前面的范围时切换进出。现在发生的是点击一个跨度切换所有列表。我是一个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()
});
});

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

Answer 1

更改

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

到

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

<强> jsFiddle example

您的$('.rental-det').slideToggle()正在选择.rental-det班级的所有列表，您可以在其中使用$(this)和.next()来选择所点击范围之后的列表上。

Answer 2

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

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

这将只显示和javascript。

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

jQuery - 使用.slideToggle一次只能切换一件事

2 个答案: