jQuery Noob，列表问题

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

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;}

来源

2014-03-02 user3352340

Here：http://jsfiddle.net/CMkhD/适用于我 – Ani

只需一个解释：您需要删除'默认'区域，并在其位置选择一个？ – sinisake

所有你需要的，在这种情况下：

$("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/无需无数的线。 :)

来源

2014-03-02 14:53:58 sinisake

不错！谢谢，我还在学习jQuery ..我来自PHP的领域：D – user3352340

jQuery Noob，列表问题

回答

相关问题