0

私が望むのは、その前のスパンをクリックすると、各リストがトグルインとトグルアウトすることだけです。1 つのスパンをクリックすると、すべてのリストが切り替わるようになりました。私は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 に答える