Question

我需要一些嵌套列表的帮助，我想要做的是显示一个列表选项并隐藏列表的其余部分，我看到的一个很好的例子是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>

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

提前感谢。

Answer 1

$(function(){
  $('ul.links > li').click(function(){
      $('ul.links > li').fadeOut();
      $(this).fadeIn();
  });
});

Answer 2

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

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

Answer 3

带有评论的快速脏样本（您可以根据需要对其进行改进）：

工作示例@ http://jsfiddle.net/dCZpx/

<div style="width: 100px">
    <div style="background-color: #FFDDEE" id="country">Click here to Select Country</div>
    <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>
    <script type="text/javascript">    
        $(function(){

            //Bind the Click handler for the box that displays the selected Country
            $("#country").click(function(){
                //When the Country Box is clicked, show all the country names except the selected one
                $(".links li").not("." + $(this).data("current")).show("slow"); 
            });

            //First Hide all the Country Names list 
            $(".links li").hide();

            //Bind OnClick handler to all list elements which are children of .links
            $(".links li").click(function(){
                //Set the currently selected country in the data attribute of the #country element.
                $("#country").data("current", $(this).attr("class"));
                //Set the text of the #country div to the selected country name
                $("#country").text($(this).text());
                //Now hide all the list elements 
                $(".links li").hide("slow");
            });
               $(".links li.us").click();
        });
    </script> 
</div>

Answer 4

您可以使用以下内容：

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

JS Fiddle demo

Answer 5

这样的事情可以解决问题：

// 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示例：http://jsbin.com/onile4

希望这有帮助！

隐藏除选定列表选项之外的列表

5 个答案: