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

// 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();
  }
});

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

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

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

li {
    display: none;
}

li.selected {
    display: list-item;
}

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

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