如何隱藏div類下的所有div並在JQuery中顯示同一類的div？

我有一個名爲「subproperties」的div類。在該div中，我有許多div元素，如邊框，背景，徽標，按鈕。這些div元素最初是隱藏的（使用style =「display：none;」）如何隱藏div類下的所有div並在JQuery中顯示同一類的div？

我也有一個下拉框，這些div元素名稱作爲選項。當我點擊一個選項說'徽標'時，顯示該div。接下來，當我點擊「邊框」選項時，應該隱藏「標識」div，並顯示「邊框」div。對所有情況也是如此。

也就是說，我希望隱藏所有類子屬性的div並只顯示一個。如何在jQuery中做到這一點？

這是我的代碼。

$("#properties option").click(function(){ 
     selectedOption=$(this).attr("value"); 

     switch(selectedOption){ 
      case '1': 
       $("#borders").show(); 
       break; 

      case '2': 
       $("#backgrounds").show(); 
       break; 

      case '3': 
       $("#typography").show(); 
       break; 
     } 
    }); 

<div class="float_left spaceleft" id="properties"> 
<p class="title1">Properties</p> 
    <div class="seperator"></div> 
     <select id="propertiesMenu" class="select" size="7"> 
       <option value="1">Borders</option> 
       <option value="2">Backgrounds</option> 
       <option value="3">Typography</option> 

     </select> 
</div><!--End of properties --> 

<div class="subproperties"> 

    <div class="float_left spaceleft" id="backgrounds" style="display:none;"> 
     <p class="title1">Backgrounds</p> 
     <select id="backgroundsMenu" class="select" size="7"> 
      <option value="bgHtml">Wallpaper</option> 
      <option value="bgForm">Form</option> 
      <option value="bgInstruct">Instructions</option> 
     </select> 
     </div><!--End of backgrounds --> 

     <div class="float_left spaceleft" id="typography" style="display:none;"> 
     <p class="title1">Typography</p> 
     <div class="seperator"></div> 
     <select id="typographyMenu" class="select" size="7"> 
      <option value="ftFormTitle">Title</option> 
      <option value="ftFormDescription">Description</option> 
      <option value="ftFieldTitle">Field Title</option> 
      <option value="ftFieldText">Field Text</option> 
     </select> 
     </div><!--End of typography --> 

    <div float_left spaceleft" id="borders" style="display:none;"> 
     <p class="title1">Borders</p> 
     <select id="bordersMenu" class="select" size="7"> 
      <option value="brForm">Form</option> 
      <option value="brDivider">Sections</option> 
     </select> 
     </div><!--End of borders --> 

</div><!-- End of sub properties -->

來源

2009-09-16 Angeline

$('#properties option').click(function() { 
    $('.subproperties div').hide(); 
    //... switch statement ...

來源

2009-09-16 07:10:51

它可以通過動畫我認爲，當給奇怪的結果。首先你隱藏一切，然後再顯示一個元素。 – Bavo 2009-09-16 07:37:51

對動畫爲真。但是對於hide（）和show（）這很好。 – 2009-09-16 08:50:37

您可以使用此：

$("div.subproperties div").hide();

隱藏所有div。然後使用選定的div的ID，以顯示它：

$("#divid").show();

來源

2009-09-16 07:06:42 kgiannakakis

當你告訴一個，你要隱藏的人，所以像：


case '1':         
     $("#borders").show();  
     $("#backgrounds").hide(); 
     $("#typography").hide(); 
     break;

或者你不妨前到隱藏所有切換並顯示指定的一個。

來源

2009-09-16 07:07:53

要在每種情況下調整：

$('#subproperties').children(':not(#idofelementtoshow)').hide(); 

$('#subproperties').children('#idofelementtoshow').show();

編輯：也許更優雅（id爲元素，以顯示ID）：

$('#id').show().siblings().hide();

來源

2009-09-16 07:11:05 Bavo

如果你真的想這樣做你可以嘗試其他的答案。

或者你可以看看jQuery UI，它提供了一個不錯的Accordion，它看起來像你想要的。

來源

2009-09-16 07:14:50

得到從選項中選擇文本，並使用這些兩行：

~~VAR的txt = ... //獲取文本選擇從列表~~

~~$（「div.subproperties」）隱藏（）; //隱藏所有DIVS~~

~~$（「div＃」+ txt）.parents（「div.subproperties」）。show（）;~~

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#propertiesMenu").change(function(){ 
     var txt=$("#propertiesMenu option:selected").text(); 
     $("div. subproperties").hide(); 
     $("div#"+txt).parents("div. subproperties").show(); 
    }); 
}); 
</script>

來源

2009-09-16 07:20:10 TheVillageIdiot

這是一個相當老的帖子，但我把這裏的信息只是爲了幫助其他人，如果有人會看到它。

要顯示的div而選擇一個價值和隱藏，同時選擇其他值： -

$（ '＃dropdownid'）。bind（'change'，function（event）{

 var i= $('#dropdownid').val(); 

     if(i=="sometext") 
     { 
      $('#divid').show(); 
     } 
     elseif(i=="othertext") 
     { 
      $('#divid').hide(); // hide the first one 
      $('#divid2').show(); // show the other one 

      }

}）;

希望這將幫助你

親切的問候， Summved

來源

2012-03-28 10:47:21

如何隱藏div類下的所有div並在JQuery中顯示同一類的div？

回答

相關問題