Jquery 隐藏除“选定列表”选项之外的列表

我需要一些关于嵌套列表的帮助，我想做的是显示其中一个列表选项并隐藏列表的其余部分，我看到的一个很好的例子是filesonic.com语言选择器或标题中的netlog状态更改

<ul class="links">
  <li class="us">United States</li>
  <li class="canada">Canada</li>
  <li class="france">France</li>
  <li class="china">China</li>
  <li class="englande">England</li>

美国
加拿大
法国
中国
英格兰

美国是默认值，但当有人点击法国时，列表的其余部分将隐藏并显示

---

提前感谢。

如果选择“我们”，您可以：

$('ul > li[class!=us]').css('display', 'none');

---

带注释的快速n脏样（您可以根据需要即兴制作）：

工作示例@

单击此处选择国家/地区

美国
加拿大
法国
中国
英格兰

$（函数（）{
//为显示所选国家/地区的框绑定单击处理程序
$（“#国家”）。单击（函数（）{
//单击国家/地区框时，显示除所选国家/地区外的所有国家/地区名称
$（“.links li”）.not（“.”+$（this.data（“当前”））.show（“慢”）；
});
//首先隐藏所有国家/地区名称列表
$（“.links li”）.hide（）；
//将OnClick处理程序绑定到作为.links子元素的所有列表元素
$（“.links li”）。单击（函数（）{
//在#country元素的数据属性中设置当前选定的国家。
$（“#国家”）.data（“当前”，$（本）.attr（“类”）；
//将#country div的文本设置为所选国家/地区名称
$（“#country”）.text（$（this.text（））；
//现在隐藏所有列表元素
$（“.links li”）.hide（“slow”）；
});
$（“.links li.us”）。单击（）；
});

您可以使用以下内容：

if ($('.selected').length){
    return false;
}
else {
    $('.links li:first').addClass('selected');
}
$('.links li').click(
    function(){
        $('.selected').removeClass('selected');
        $(this).addClass('selected');
    });

加上CSS：

li {
    display: none;
}

li.selected {
    display: list-item;
}

ul:hover li {
    display: list-item;
}

---

.

像这样的东西会起作用：

// Initially hide everything apart from the active list item
$('ul li.active').show()
  .siblings().hide();

// Set up a click handler that will show all the list items when the active
// element is clicked on, or makes the clicked on item the active item and hides
// the rest.
$('ul li').click(function(){
  var $parent=$(this).parent();
  if ($parent.is('.open')){
    $parent.removeClass('open');
    $(this).addClass('active')
      .siblings().removeClass('active').hide();
  }
  else {
    $parent.addClass('open').children().show();
  }
});

下面是一个正在工作的JSBIN示例：

---

希望这有帮助

这对我来说很有效，但我希望美国成为被选中的国家，而不是“点击这里选择国家”option@Ralph：默认情况下更新帖子以选择我们。您只需调用$（“.links li.us”）。单击（）；在document.ready处理程序的末尾。我意识到了一些问题，比如当你再次单击所选列表时，或者当鼠标单击其他地方时列表没有关闭。。。你有没有可能再看看这些？感谢这看起来很棒，只是我希望选择/活动列表选项位于列表顶部，就像上面的示例一样。。。我真的非常感谢您的支持…您好，您的意思是希望将所选项目移动到列表的顶部？好的，尝试以下操作：，唯一的更改是这一行：

$（this）.detach（）.prependTo（$parent），它分离单击的列表项并将其重新插入到项目列表的顶部。使用Detach是因为它保持事件处理程序完好无损。如果这回答了您的问题，请按此标记！干杯JSFIDLE示例总是工作得更好，因此我可以进行更改并测试自己，感谢您的回答。这不是一个完整的答案，它不允许您单击所选项目以重新显示整个列表。
li {
    display: none;
}

li.selected {
    display: list-item;
}

ul:hover li {
    display: list-item;
}

// Initially hide everything apart from the active list item
$('ul li.active').show()
  .siblings().hide();

// Set up a click handler that will show all the list items when the active
// element is clicked on, or makes the clicked on item the active item and hides
// the rest.
$('ul li').click(function(){
  var $parent=$(this).parent();
  if ($parent.is('.open')){
    $parent.removeClass('open');
    $(this).addClass('active')
      .siblings().removeClass('active').hide();
  }
  else {
    $parent.addClass('open').children().show();
  }
});