Question

我有一个名为“subproperties”的div类。在那个div中，我有很多div元素，如边框，背景，徽标，按钮。这些div元素最初是隐藏的（使用style =“display：none;”）

我还有一个下拉框，其中包含这些div元素名称作为选项。当我点击一个选项说'logo'时，会显示该div。接下来，当我单击“边框”选项时，应隐藏“徽标”div并显示“border”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 = ... //从SELECT LIST获取文本~~

$（“div.subproperties”）。hide（）; // HIDE ALL DIVS

<击> $（ “DIV＃” + TXT）。家长（ “div.subproperties”）显示（）;

<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

          }

}）;

希望这会对你有所帮助

亲切的问候， Summved

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

7 个答案: