как спрятать все div-ы под div-классом и показать div-класс того же класса в JQuery?

Question

У меня есть класс div с именем "subperperties". В этом div у меня есть много элементов div, таких как рамка, фон, логотип, кнопка. Эти элементы div изначально скрыты (используя style = "display: none;")

У меня также есть выпадающий список с этими именами элементов div в качестве опций. Когда я нажимаю опцию, скажем «логотип», показывается этот div. Затем, когда я нажимаю на опцию 'border', div 'logo' должен быть скрыт и должен отображаться div 'border'. Аналогично для всех случаев.

То есть, я хочу, чтобы все элементы 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();

Edit: Может быть, более элегантный (id это идентификатор элемента для отображения):

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

Answer 2

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

Answer 3

Вы можете использовать это:

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

чтобы скрыть все div. Затем используйте идентификатор выбранного div, чтобы показать его:

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

Answer 4

Это довольно старый пост, но я размещаю информацию здесь, чтобы помочь другим, если кто-то позаботится об этом.

Чтобы показать 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

Answer 5

получить выделенный текст из опции и использовать эти две строки:

var txt = ... // ПОЛУЧИТЬ ТЕКСТ ИЗ ВЫБРАТЬ СПИСОК

$ ("div.subproperties"). Hide (); // HIDE ALL DIVS

$ ( "# ДИВ" + TXT) .parents ( "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 6

Если вы действительно хотите сделать это вручную, вы можете попробовать другие ответы.

Или вы можете взглянуть на jQuery UI , который предлагает довольно хороший Accordion , который в конце концов выглядит так, как вы хотите.

Answer 7

Когда вы показываете одно, вы хотите скрыть остальные, так что-то вроде:

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

Или, возможно, вы захотите скрыть их все перед переключателем, а затем показать указанный.