0

我重复了三个相同的 div，点击查看详细信息链接，显示隐藏的 div，一个类 .openPanel 添加到一个工作正常的 div 中，但同样的情况也在另外两个 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>
4

3 回答 3

2

Put your div with class detailBg and div with id detailPanel in a single div with class say huh, then apply below code, then i think it may help you achieve what you want:

        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;
        });
于 2013-10-15T21:53:12.713 回答
2 
$('a#viewDetail').click(function (e) {
  $(this).toggle(); // <-------only edit made
  $('a#viewDetail').closest('.result').toggleClass('openPanel');
  return false;
});

使用“this”而不是唯一标识符将完成我认为您想要的（切换正在单击的项目）。然后清理您的代码以删除所有冗余 ID。从我所见，（根本）不需要它们。

于 2013-10-15T20:38:54.573 回答
0

对于给定的 HTML 文档， AnID必须是唯一的。您正在为多个 div 提供相同的 ID：

<div class="viewDetails" id="detailPanel" style="display: none;">

所以当这段代码运行时：

$('#detailPanel').toggle();

上下文无关紧要，理论上您的目标是一个id 为detailPanel. 无论您单击哪个链接，jQuery 都会找到第一个链接并将其打开或关闭。

至少这是应该发生的：见fiddle。

我不知道.openPanel该类应该做什么，但是如果您知道如何closest()在 jQuery 中使用，那么您可以使用该方法来替换您的toggle()代码。

于 2013-10-15T20:24:30.410 回答