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

Posted 2023-02-25

【中文标题】如何隐藏一个div类下的所有div并在JQuery中显示一个相同类的div？

【英文标题】：how to hide all the divs under a div class and show a div of the same class in JQuery?

【发布时间】：2009-09-16 07:02:20

【问题描述】：

我有一个名为“子属性”的 div 类。在那个 div 中，我有许多 div 元素，例如边框、背景、徽标、按钮。这些 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 -->

【参考方案1】：

在每种情况下进行调整：

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

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

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

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

【参考方案2】：

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

【讨论】：

我认为使用动画时会产生奇怪的结果。首先隐藏所有内容，然后再次显示一个元素。

适用于动画。但是对于 hide() 和 show() 这很好用。

【参考方案3】：

你可以用这个：

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

隐藏所有 div。然后使用选中的 div 的 id 来显示：

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

【参考方案4】：

当您显示一个时，您想隐藏其他的，例如：

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

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

【参考方案5】：

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

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

【参考方案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>

【参考方案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

          

);

希望对你有帮助

亲切的问候， 求和