開關不能正常工作

Question

我有三個相同的div重複，我有一個查看詳細信息鏈接點擊其中顯示隱藏的div和一個類.openPanel添加在一個工作正常，但同樣發生在另一個兩個divs也。我希望這一次能夠在一個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您的股利和股利ID爲detailPanel在一個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; 
     }); 

Answer 2

對於給定的HTML文檔，ID必須是唯一的。你給同一個ID數的div：

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

所以，當運行此代碼：

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

上下文不要緊，你是理論上靶向一個元素與detailPanel一個id 。 jQuery找到第一個，不管你點擊了哪個鏈接並打開或關閉它。

至少這是應該發生的事情：請參閱fiddle。

我不知道.openPanel班應該做什麼，但如果您知道如何在jQuery中使用closest()，那麼您可以使用該方法替換toggle()代碼。

Answer 3

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

使用「本」，而不是一個唯一的標識符將完成什麼，我相信你想要的（切換多數民衆贊成被點擊的項目）。然後清理代碼以刪除所有冗餘ID。根據我所能看到的，它們是不需要的（根本不需要）。