jquery - 切换不能正常工作

Question

我重复了三个相同的 div，我点击了一个查看详细信息链接，其中显示了隐藏的 div，并且在一个 div 中添加了一个类 .openPanel，它工作正常，但同样的情况也发生在另外两个 div 中。我希望它一次在一个 div 中工作。

<div class="result">
    <div class="detailBg">
        <div class="detail">
            <div class="right">
                <h4 class="txttTransformNorml remmarginT addmarginB5 txt444">Deluxe Room</h4>
                <p><img src="images/star-5rated.png"></p>
                <p class="fnt-size12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div class="bookprice">
                <div class="col">
                    <div class="padding">
                        <p><span class="txtblue fnt-size20 font-opensansbd">$199</span><br>per room per night</p>
                        <p><a href="#" class="btn">Book Now</a></p>
                        <a href="#" id="viewDetail">+ View Details</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="viewDetails" id="detailPanel" style="display: none;">
        <ul>
            <li>Smoking Preferences: <span class="txt444">No</span></li>
            <li>Immediate Charge Required: <span class="txt444">True</span></li>
            <li>Guarantee Required: <span class="txt444">False</span></li>
        </ul>
        <p class="font-opensansbd txt000">Cancellation Policy :</p>
        <p>We understand that sometimes your travel plans change. We do not charge a change or cancel fee. However, this property (One & Only Royal Mirage ) imposes the following penalty to its customers that we are required to pass on: Cancellations or changes made after 11:59 PM ( on Oct 15, 2013 are subject to a 1 Night Room &amp; Tax penalty. The property makes no refunds for no shows or early checkouts.</p>
        <p class="font-opensansbd txt000">Note:</p>
        <ul class="remmarginB">
            <li>Number of children (1-3 per room)</li>
            <li>Number of children (1-3 per room)</li>
        </ul>
    </div>
</div>

<div class="result">
    <div class="detailBg">
        <div class="detail">
            <div class="right">
                <h4 class="txttTransformNorml remmarginT addmarginB5 txt444">Deluxe Room</h4>
                <p><img src="images/star-5rated.png"></p>
                <p class="fnt-size12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div class="bookprice">
                <div class="col">
                    <div class="padding">
                        <p><span class="txtblue fnt-size20 font-opensansbd">$199</span><br>per room per night</p>
                        <p><a href="#" class="btn">Book Now</a></p>
                        <a href="#" id="viewDetail">+ View Details</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="viewDetails" id="detailPanel" style="display: none;">
        <ul>
            <li>Smoking Preferences: <span class="txt444">No</span></li>
            <li>Immediate Charge Required: <span class="txt444">True</span></li>
            <li>Guarantee Required: <span class="txt444">False</span></li>
        </ul>
        <p class="font-opensansbd txt000">Cancellation Policy :</p>
        <p>We understand that sometimes your travel plans change. We do not charge a change or cancel fee. However, this property (One & Only Royal Mirage ) imposes the following penalty to its customers that we are required to pass on: Cancellations or changes made after 11:59 PM ( on Oct 15, 2013 are subject to a 1 Night Room &amp; Tax penalty. The property makes no refunds for no shows or early checkouts.</p>
        <p class="font-opensansbd txt000">Note:</p>
        <ul class="remmarginB">
            <li>Number of children (1-3 per room)</li>
            <li>Number of children (1-3 per room)</li>
        </ul>
    </div>
</div>

<div class="result">
    <div class="detailBg">
        <div class="detail">
            <div class="right">
                <h4 class="txttTransformNorml remmarginT addmarginB5 txt444">Deluxe Room</h4>
                <p><img src="images/star-5rated.png"></p>
                <p class="fnt-size12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div class="bookprice">
                <div class="col">
                    <div class="padding">
                        <p><span class="txtblue fnt-size20 font-opensansbd">$199</span><br>per room per night</p>
                        <p><a href="#" class="btn">Book Now</a></p>
                        <a href="#" id="viewDetail">+ View Details</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="viewDetails" id="detailPanel" style="display: none;">
        <ul>
            <li>Smoking Preferences: <span class="txt444">No</span></li>
            <li>Immediate Charge Required: <span class="txt444">True</span></li>
            <li>Guarantee Required: <span class="txt444">False</span></li>
        </ul>
        <p class="font-opensansbd txt000">Cancellation Policy :</p>
        <p>We understand that sometimes your travel plans change. We do not charge a change or cancel fee. However, this property (One & Only Royal Mirage ) imposes the following penalty to its customers that we are required to pass on: Cancellations or changes made after 11:59 PM ( on Oct 15, 2013 are subject to a 1 Night Room &amp; Tax penalty. The property makes no refunds for no shows or early checkouts.</p>
        <p class="font-opensansbd txt000">Note:</p>
        <ul class="remmarginB">
            <li>Number of children (1-3 per room)</li>
            <li>Number of children (1-3 per room)</li>
        </ul>
    </div>
</div>

<script>
    $('a#viewDetail').click(function (e) {
        $('#detailPanel').toggle();
        $('a#viewDetail').closest('.result').toggleClass('openPanel');
        return false;
    });
</script>

Answer 1

将带有类 detailBg 的 div 和带有 id detailPanel 的 div 放在一个带有类 say huh 的 div 中，然后应用下面的代码，然后我认为它可以帮助您实现您想要的:

        jQuery("a#viewDetail").click(function(e){
            var $this = jQuery(this);
            jQuery(this).closest(".huh").toggleClass("openPanel");
            jQuery(this).closest(".huh").children("#detailPanel").slideToggle();
            jQuery(this).hide();
            jQuery(this).siblings("#hideDetail").show();
            $('a#viewDetail').not($this).each(function(){
                jQuery(this).closest(".huh").removeClass("openPanel");
                $(this).closest(".huh").children("#detailPanel").slideUp();  
                jQuery(this).show();
                jQuery(this).siblings("#hideDetail").hide();
             });
             return false;
        });

        jQuery("a#hideDetail").click(function(e){
            jQuery(this).closest(".huh").removeClass("openPanel");
            jQuery(this).closest(".huh").children("#detailPanel").slideUp();
            jQuery(this).siblings("#viewDetail").show();
            jQuery(this).hide();
            return false;
        });