Javascript 如何使用jquery创建筛选器控件？

我正在尝试创建一个过滤器控件，但是它还不能正常工作

<div class="panel-filter-wrapper"><div class="panel-filter" data-filter-property="">
    <div class="panel-selected-filter">
        <span class="selected-filter-name">All</span>
        <span class="caret caret-down"></span>
    </div>
    <ul>
        <li data-value="*" data-param="role" class="selected">All</li>
        <li data-value="admin" data-param="role" class="">Admins</li>
        <li data-value="client" data-param="role">Clients</li>
        <li data-value="agent" data-param="role">Agents</li> 
    </ul>

代码示例已打开。 问题是jquery不会处理click事件，并且不会显示items列表。控件的外观（行为）应类似于：

函数showFileter（）
{
var ul=document.getElementById（'FilterOption'）；
ul.style.display=（ul.style.display=“无”）？“块”：“无”；
}
全部的

所有
管理员
客户
代理

试试这个，它应该可以正常工作。工作

jQuery:

$(document).ready(function(){
     $(".panel-selected-filter").click(function() { // show the dropdown list
         $('.panel-filter > ul').show();
     });

     $('.panel-filter > ul > li').click(function() {  // select and hide the the list
         $('.selected-filter-name').text($(this).text());
         $('.panel-filter > ul').hide();
     });

     $(document).click(function(e){           // hide list if clicked outside
         if($(e.target).is('.panel-selected-filter, .panel-selected-filter *'))return;
             $('.panel-filter > ul').hide();
     });
});

.panel-filter ul {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: none;
    font-size: 13px;
    left: 0;
    list-style: none outside none;
    margin: 0;
    min-width: 100%;
    padding: 0;          /* added to align li's to the left*/
    position: absolute;
    top: 24px;
    z-index: 0;
}

我添加了填充：0px；在css类中，如下所示：

CSS:

$(document).ready(function(){
     $(".panel-selected-filter").click(function() { // show the dropdown list
         $('.panel-filter > ul').show();
     });

     $('.panel-filter > ul > li').click(function() {  // select and hide the the list
         $('.selected-filter-name').text($(this).text());
         $('.panel-filter > ul').hide();
     });

     $(document).click(function(e){           // hide list if clicked outside
         if($(e.target).is('.panel-selected-filter, .panel-selected-filter *'))return;
             $('.panel-filter > ul').hide();
     });
});

.panel-filter ul {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: none;
    font-size: 13px;
    left: 0;
    list-style: none outside none;
    margin: 0;
    min-width: 100%;
    padding: 0;          /* added to align li's to the left*/
    position: absolute;
    top: 24px;
    z-index: 0;
}

---

嗨，我在这里没有看到任何jquery代码。实际上，jquery代码是个问题。如何添加它来处理此事件？谢谢。让我们看看jquery代码，它也不在您的JSFIDLE中。我需要添加类似$（“div.panel-selected-filter”）的内容。单击（function（）{$（this.somethine}）；让它工作！这不是我想要的。菜单必须在单击时显示！不是悬停。有了这个代码，我的插入符号消失了。我无法从列表中选择元素。我已编辑了用于选择项目的jQuery代码，并显示为所选项目。插入符号可能因css而消失。您提供的小提琴中也没有。我添加了一个符号来检查插入符号。^。这工作正常。您可以在“.panel filter>ul>li”上添加.blur（）事件并隐藏“ul”。我没有用你的代码尝试过这个，但它应该可以工作。我已经编辑了我的答案，并添加了代码，用于在单击外部时隐藏列表。blur（）和.focusout（）仅适用于、区域、按钮、输入、标签、选择、文本区域元素。