如何在div类下隐藏所有div并在JQuery中显示同一类的div？

Question

我有一个名为“ subproperties”的div类。 在那个div中，我有很多div元素，例如border，background，logo，button。 这些div元素最初是隐藏的（使用style =“ display：none;”）

我还有一个下拉框，其中包含这些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 -->

Answer 1

在每种情况下进行调整：

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

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

编辑：也许更优雅（id是要显示的元素的id）：

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

Answer 2

您可以使用此：

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

隐藏所有div。 然后使用选定的div的ID进行显示：

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

Answer 3

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

Answer 4

当显示一个时，您想隐藏其他，所以类似：

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

或者，您可能希望将它们全部隐藏在开关之前，然后显示指定的开关。

Answer 5

如果您真的想手工做，可以尝试其他答案。

或者，您也可以看看jQuery UI ，它提供了一个相当不错的Accordion ，毕竟看起来像您想要的。

Answer 6

从选项中获取所选文本并使用以下两行：

var txt = ... //从选择列表中获取文本

$（“ div.subproperties”）。hide（）; //隐藏所有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>

Answer 7

这是一个比较老的文章，但是我在这里放一些信息只是为了帮助其他人（如果有人看到）。

要在选择一个值时显示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

          }

}）;

希望这个能对您有所帮助

亲切的问候