javascript - 如何使用 jquery 创建过滤器控件？

Question

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

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

CSS代码:

.panel-filter-wrapper {
 display: inline-block;
}
.panel-filter {
display: inline-block;
cursor: pointer;
position: relative;
color: #999;
}
.panel-filter .panel-selected-filter {
padding: 2px 19px 2px 10px;
border: 1px solid transparent;
position: relative;
z-index: 1;
}
.panel-filter:hover,
.panel-filter.active {
color: #444;
}
.panel-filter:hover .panel-selected-filter,
.panel-filter.active .panel-selected-filter {
 border: 1px solid #ccc;
 background: #fff;
}
.panel-filter:hover .caret,
.panel-filter.active .caret {
 display: inline-block;
}
.panel-filter.active .panel-selected-filter {
 border-bottom-width: 0;
}
.panel-filter.active ul {
display: block;
}
.panel-filter ul {
list-style: none;
display: none;
position: absolute;
border: 1px solid #ccc;
top: 24px;
left: 0;
margin: 0;
min-width: 100%;
z-index: 0;
background: #fff;
font-size: 13px;
border-radius: 2px;
-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.1);
}
.panel-filter li {
padding: 5px 15px;
white-space: nowrap;
color: #333;
}
.panel-filter li:first-child {
border-top: none;
}
.panel-filter li:hover {
background-color: #f2f4f8 !important;
color: #181a1c;
}
.panel-filter li.selected {
font-weight: bold;
}
.panel-filter .caret {
display: none;
position: absolute;
right: 5px;
top: 9px;
}

.caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: top;
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-right: 4px solid transparent;
border-left: 4px solid black;
content: "";
}
.caret,
.caret-down {
border-bottom: 4px solid transparent;
border-top: 4px solid black;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}

代码示例在JSfiffle .问题是jquery不处理click事件，items列表不显示。控件应该看起来(表现)像:

Answer 1

试试这个，它应该按预期工作。工作 Fiddle .

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

我添加了 padding: 0px;在你的 CSS 类中，像这样:

CSS:

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