0

SlideToggle のヘルプが必要です。

HTML:

<ul>
    <li>
        <figure class="left"><img src="images/slider/img3.jpg" alt="" width="270" height="152" /><a href="#" class="image-overlay"></a></figure>
        <div class="meta">
            <h2>Superior Double Room</h2>
            <p>Prices are per room<br />20 % VAT Included in price</p>
            <p>Non-refundable<br />Full English breakfast $ 24.80 </p>
            <a href="javascript:void(0)" title="more info" class="more-info">+ more info</a>
        </div>
        <div class="room-information">
            <div class="row">
                <span class="first">Max:</span>
                <span class="second"><img src="images/ico/person.png" alt="" /><img src="images/ico/person.png" alt="" /></span>
            </div>
            <div class="row">
                <span class="first">Price:</span>
                <span class="second">$ 55</span>
            </div>
            <div class="row">
                <span class="first">Rooms:</span>
                <span class="second">01</span>
            </div>
            <a href="#" class="gradient-button" title="Book">Book</a>
        </div>
        <div class="more-information">
            <p>Stylish and individually designed room featuring a satellite TV, mini bar and a 24-hour room service menu.</p>
            <p><strong>Room Facilities:</strong> Safety Deposit Box, Air Conditioning, Desk, Ironing Facilities, Seating Area, Heating, Shower, Bath, Hairdryer, Toilet, Bathroom, Pay-per-view Channels, TV, Telephone</p>
            <p><strong>Bed Size(s):</strong> 1 Double </p>
            <p><strong>Room Size:</strong>  16 square metres</p>
        </div>
    </li>

        <li>
        <figure class="left"><img src="images/slider/img3.jpg" alt="" width="270" height="152" /><a href="#" class="image-overlay"></a></figure>
        <div class="meta">
            <h2>Superior Double Room</h2>
            <p>Prices are per room<br />20 % VAT Included in price</p>
            <p>Non-refundable<br />Full English breakfast $ 24.80 </p>
            <a href="javascript:void(0)" title="more info" class="more-info">+ more info</a>
        </div>
        <div class="room-information">
            <div class="row">
                <span class="first">Max:</span>
                <span class="second"><img src="images/ico/person.png" alt="" /><img src="images/ico/person.png" alt="" /></span>
            </div>
            <div class="row">
                <span class="first">Price:</span>
                <span class="second">$ 55</span>
            </div>
            <div class="row">
                <span class="first">Rooms:</span>
                <span class="second">01</span>
            </div>
            <a href="#" class="gradient-button" title="Book">Book</a>
        </div>
        <div class="more-information">
            <p>Stylish and individually designed room featuring a satellite TV, mini bar and a 24-hour room service menu.</p>
            <p><strong>Room Facilities:</strong> Safety Deposit Box, Air Conditioning, Desk, Ironing Facilities, Seating Area, Heating, Shower, Bath, Hairdryer, Toilet, Bathroom, Pay-per-view Channels, TV, Telephone</p>
            <p><strong>Bed Size(s):</strong> 1 Double </p>
            <p><strong>Room Size:</strong>  16 square metres</p>
        </div>
    </li>

</ul>

Jクエリ:

$(document).ready(function () {
$(".more-information").slideUp();
        $(".more-info").click(function() {
        var txt = $(".more-information").is(':visible') ? '+ more info' : ' - less info';
        $(".more-info").text(txt);
        $(".more-information").slideToggle("slow");
    });
});

「詳細情報」リンクをクリックして、「詳細情報」div を開く必要があります。一度にすべて切り替えられるようになりましたが、それぞれを個別に切り替えるにはどうすればよいですか?

ありがとうございました。

4

1 に答える 1

0

どうぞ」フィドル

JavaScript:

$(document).ready(function () {
$(".more-information").slideUp();
$(".more-info").click(function() {
    var moreinformation = $(this).closest("li").find(".more-information");
        var txt = moreinformation.is(':visible') ? '+ more info' : ' - less info';
        $(this).text(txt);
        moreinformation.slideToggle("slow");
    });
});​

roXon が要求したため:

moreinformation.stop(true, true).slideToggle("slow");

リンクを立て続けに複数回クリックしたときに発生する問題を防ぎます。

于 2013-01-02T19:55:11.147 に答える