我创建了一个有效的下拉菜单,但我希望它用于选择过滤器。所以问题是当你选择一个过滤器选项时,下拉菜单消失了。我只希望菜单在选择单词过滤器时显示并消失。我想我只需要更多的javascript来做到这一点,我只是不知道怎么做。提前感谢您的帮助。
这是我的html:
<div id="vv" class="fill_box">
Filters
<div class="dropdown1">
<div class="padding">
<div class="type">
<div class="typeTitle">
Type:
</div>
<div class="typeButton">
<div class="typeOne">
All
</div>
<div class="typeOne">
Local
</div>
<div class="typeOne">
Chain
</div>
</div>
</div>
<div class="type">
<div class="typeTitle">
Price:
</div>
<div class="typeButton">
<div class="priceOne">
$
</div>
<div class="priceOne">
$$
</div>
<div class="priceOne">
$$$
</div>
<div class="priceOne">
$$$$
</div>
</div>
</div>
<div class="type">
<div class="nowButton">
Open Now
</div>
</div>
<div class="type">
<div class="typeTitle">
Category 1:
</div>
<div class="categoryButton">
<input type="text">
</div>
</div>
</div>
</div>
</div>
CSS:
.fill_box {
position: relative;
margin: 0 auto;
background: #fff;s
border-radius: 5px;
box-shadow: 0 1px 0 rgba(0,0,0,0.2);
cursor: pointer;
outline: none;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
text-align: center;
background: #CC0000;
border: 2px solid white;
border-radius: 4px;
padding: 5px 0;
margin-top: 10px;
font-size: 14px;
width: 100px;
color: white;
}
.fill_box .dropdown1 {
overflow: hidden;
margin: 0 auto;
padding: 0px;
background: white;
border-radius: 0 0 0px 0px;
border: 1px solid rgba(0,0,0,0.2);
border-top: none;
border-bottom: none;
list-style: none;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
text-align: left;
max-height: 0;
background: #3d3d3d;
width: 300px;
color: white;
}
JavaScript:
function DropDown1(me) {
this.dd = me;
this.initEvents();
}
DropDown1.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
});
}
}
$(function() {
var dd = new DropDown1( $('#vv') );
$(document).click(function() {
// all DropDown1s
$('.fill_box').show('active');
});
});