同一div ID在頁面上摺疊

Question

我有兩個div在同一頁上具有相同的ID。我想探索一個div的描述。在我的情況下，如果我點擊div然後所有desc擴大。

$(document).ready(function() { 
 
    var collapsed = "image"; 
 

 
    $("#shw_desc").click(function() { 
 
    if ($(".desc").is(":visible")) { 
 
     $(".desc").slideUp(); 
 
     $("#shw_desc_icon img").attr("src", collapsed).css("transform", "rotate(0deg)"); 
 
    } else { 
 
     $(".desc").slideDown(); 
 
     $("#shw_desc_icon img").attr("src", collapsed).css("transform", "rotate(180deg)"); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="nt_selected"> 
 
    <span>Description</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span> 
 
</div> 
 
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;"> 
 
    <p>Some Description</p> 
 
</div> 
 

 
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="nt_selected"> 
 
    <span>Description 2</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span> 
 
</div> 
 
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;"> 
 
    <p>Some Description 2</p> 
 
</div>

Answer 1

我有相同的頁面上有兩個DIV與同一ID

這是HTML無效。 ID屬性在頁面內必須是唯一的。改變標記以改爲在這些元素上使用通用類屬性。

從那裏您可以使用關鍵字this來引用引發事件的元素並找到應修改的相關元素。

另外請注意，您可以通過使用slideToggle()和toggleClass()了一個多if聲明簡化您的JS代碼的邏輯，並且可以通過將內嵌樣式的樣式表簡化了HTML。試試這個：

$(document).ready(function() { 
 
    var collapsed = "image"; 
 

 
    $(".shw_desc").click(function() { 
 
    $(this).toggleClass('open').next('.desc').slideToggle(); 
 
    $(this).find(".shw_desc_icon img").attr("src", collapsed); 
 
    }); 
 
});

.shw_desc { 
 
    background-color: #dfdfdf; 
 
    font-size: 14px; 
 
    float: left; 
 
    padding: 4px 12px; 
 
    width: 90.3%; 
 
    color: #666 
 
} 
 
.shw_desc_icon { 
 
    float: right; 
 
    transform: rotate(0deg); 
 
} 
 
.shw_desc.open .shw_desc_icon { 
 
    transform: rotate(180deg); 
 
} 
 
.desc { 
 
    display: none; 
 
    border: 1px solid #eee; 
 
    padding: 6px 12px; 
 
    color: #999; 
 
    font-size: 13px; 
 
    width: 90%; 
 
    float: left; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="shw_desc nt_selected"> 
 
    <span>Description 1</span> 
 
    <span class="shw_desc_icon glyphicon glyphicon-chevron-right"> 
 
    <img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"> 
 
    </span> 
 
</div> 
 
<div class="desc"> 
 
    <p>Some Description 1</p> 
 
</div> 
 
<div class="shw_desc nt_selected"> 
 
    <span>Description 2</span> 
 
    <span class="shw_desc_icon glyphicon glyphicon-chevron-right"> 
 
    <img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"> 
 
    </span> 
 
</div> 
 
<div class="desc"> 
 
    <p>Some Description 2</p> 
 
</div>

Answer 2

標識符應該是唯一的，被認爲是無效的HTML。

我建議確保使用類或數據屬性來選擇元素，以及生成Html的內容確保使用唯一標識符，或者如果不需要，將它們全部放在一起。

然而，假設你可能無法改變，我將使用您的確切標記，並僅適用於腳本修改量最小 ，使其工作生成的HTML。

對於click事件中，你可以在你選擇使用[id=identifier]代替#identifier，這樣$("[id=shw_desc]").click(function() {

這可以作爲選擇的屬性可以返回多個結果，但是，通過標識$(#...)的jQuery只會返回選擇時，第一場比賽。

在click事件處理程序代碼中，確保始終保持在當前上下文中。 這適用於您使用綁定click處理程序的選擇器。

如果點擊了一個shw_desc，則不想處理所有.desc元素，但只處理當前點擊的shw_desc旁邊的元素。

同爲#shw_desc_icon img，你只想處理位於shw_desc內的形象，被點擊，而不是所有其他網頁上。爲此，您可以使用類似的選擇，以$("#shw_desc_icon img", this)

$(document).ready(function() { 
 
    var collapsed = "image"; 
 

 
    // Select by attribute to bind to ALL shw_desc elements not just the first one 
 
    $("[id=shw_desc]").click(function() { 
 
    var $desc = $(this).next('.desc'); //Get the .desc element next to the current context. 
 
    
 
    if ($desc.is(":visible")) { 
 
     $desc.slideUp(); 
 
     
 
     // Use ',this' to ensure you only query for #shw_desc_icon within the current context. 
 
     $("#shw_desc_icon img", this).attr("src", collapsed).css("transform", "rotate(0deg)"); 
 
    } else { 
 
     $desc.slideDown(); 
 
     $("#shw_desc_icon img", this).attr("src", collapsed).css("transform", "rotate(180deg)"); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="nt_selected"> 
 
    <span>Description</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span> 
 
</div> 
 
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;"> 
 
    <p>Some Description</p> 
 
</div> 
 

 
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="nt_selected"> 
 
    <span>Description 2</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span> 
 
</div> 
 
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;"> 
 
    <p>Some Description 2</p> 
 
</div>

再次，說了這麼多，試圖擺脫重複的識別碼，並使用這些元素的其他共同屬性進行選擇。 當然，情境意識仍然適用。

Answer 3

或者想法

$(document).ready(function() { 
 
     var collapsed = "image"; 
 
    
 
     $(".meclick").click(function() { 
 
     \t \t var $box = $(this).parents('.box:first'); 
 
      if(!$box.find('.desc:first').hasClass('visible')) 
 
      { 
 
      $box.find('.desc:first').addClass('visible'); 
 
      $box.find('.desc:first').slideDown(); 
 
      $box.find('.desc:first').find("#shw_desc_icon img:first").attr("src", collapsed).css("transform", "rotate(0deg)"); 
 
      } 
 
      else 
 
      { 
 
      \t $box.find('.desc:first').removeClass('visible'); 
 
      $box.find('.desc:first').slideUp(); 
 
      $box.find('.desc:first').find("#shw_desc_icon img:first").attr("src", collapsed).css("transform", "rotate(180deg)"); 
 
      } 
 
    
 
    
 
     }); 
 
    });

.visible{}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    
 
    <div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="meclick nt_selected"> 
 
     <span>Description</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span> 
 
    </div> 
 
    <div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;"> 
 
     <p>Some Description</p> 
 
    </div> 
 
    
 
    </div> 
 
    
 
    <div class="box"> 
 
    <div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="meclick nt_selected"> 
 
     <span>Description 2</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span> 
 
    </div> 
 
    <div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;"> 
 
     <p>Some Description 2</p> 
 
    </div> 
 
    </div>