jQuery Noob，列出问题

Question

我是一个 jQuery 新手，我正在尝试让这个列表按照我希望的方式工作......一个 li 一次被选中，其他的被选中隐。它的工作原理是 ul 展开以显示 li(s) 但随后 不允许您选择不同的 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');


    });

fiddle : http://jsfiddle.net/GFxb4/2/ 不需要无数行。 :)