Question

我有三个相同的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>

Answer 1

$('a#viewDetail').click(function (e) {
  $(this).toggle(); // <-------only edit made
  $('a#viewDetail').closest('.result').toggleClass('openPanel');
  return false;
});

使用“this”而不是唯一标识符将完成我认为你想要的东西（切换被点击的项目）。然后清理代码以删除所有冗余ID。从我能看到的东西中根本不需要它们。

Answer 2

将你的div与class detailBg和div一起使用id detailPanel在一个div中用class say呵呵，然后在代码下面应用，然后我认为它可以帮助你达到你想要的效果：

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

Answer 3

ID对于给定的HTML文档必须是唯一的。你给几个div提供相同的ID：

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

所以当这段代码运行时：

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

上下文无关紧要，理论上你的目标是一个元素，其id为detailPanel。 jQuery找到第一个，无论你点击哪个链接并打开或关闭它。

至少应该发生这种情况：见fiddle。

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

切换不正常

3 个答案: