如何隐藏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？

回答

相关问题