Question

我是一个jQuery Noob，我试图让这个列表以我喜欢的方式工作...... One li一次被选中而其他被隐藏。它的工作原理是ul展开以展示li(s)，然后展示doesn't allow you to select a different li？

HTML

<ul class="search_buttons">
    <li class="1 selected_region">EUW</li>
    <li class="2 not_selected_region">EUNE</li>
    <li class="3 not_selected_region">NA</li>
    <li class="4 not_selected_region">LAN</li>
    <li class="5 not_selected_region">LAS</li>
    <li class="6 not_selected_region">BR</li>
    <li class="7 not_selected_region">TR</li>
    <li class="8 not_selected_region">RU</li>
    <li class="9 not_selected_region">OCE</li>
</ul>

jQuery：

pastebin - 速记：

$(document).ready(function() {
    $( "ul.search_buttons" ).click(function() {
      $( "ul.search_buttons li" ).each(function() {
        $( this ).toggleClass( "show_regions" );
      });
    });

    $( "ul.search_buttons li.1" ).click(function() {
      $( "ul.search_buttons li.1" ).each(function() {
        $( this ).addClass("selected_region");
            $("ul.search_buttons li.2").removeClass("selected_region");
                $("ul.search_buttons li.2").addClass("not_selected_region");

                ...
      });
    });
$( "ul.search_buttons li.2" ).click(function() {
  $( "ul.search_buttons li.2" ).each(function() {
    $( this ).addClass("selected_region");
        $("ul.search_buttons li.1").removeClass("selected_region");
            $("ul.search_buttons li.1").addClass("not_selected_region");

                ...
        });
    });

    ...
});

CSS：

li.nav_search:hover {background:none;}
ul.search_buttons {
margin:0;
padding:0;  
list-style-type:none;
box-shadow: 0 1px 2px #000;
}
ul.search_buttons li {
padding:0;
padding-left:1%;
padding-right:1%;
background-color:rgba(255,255,255,0.25);
    color:rgba(0,0,0,0.5);
    transition:0.25s;
}
ul.search_buttons li:hover {cursor:pointer;background-color:rgba(255,255,255,0.5);}
li.show_regions {display:list-item !important;}
li.selected_region {display:list-item !important;}
li.not_selected_region {display:none;}

Answer 1

在这种情况下，您只需要：

$( "ul.search_buttons" ).click(function() {
          $( "ul.search_buttons li" ).each(function() {
                $( this ).toggleClass( "show_regions" );
          });
        });

$( "ul.search_buttons li" ).click(function() {

          $( this ).addClass("selected_region");

    $( this ).siblings().addClass('not_selected_region');
      $( this ).siblings().removeClass('selected_region');


    });

小提琴： http://jsfiddle.net/GFxb4/2/ 无需无数行。：）

jQuery Noob，列出问题

1 个答案: