Question

我需要一些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>

Jquery的：

$(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。现在它一下子翻转，我怎样才能实现独立切换？

谢谢。

Answer 1

您可以转到“Fiddle

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");

快速连续多次点击链接可以防止发生不良事件。

SlideToggle独立的多个元素

1 个答案: