JavaScript 下拉菜单

Question

我创建了一个可用的下拉菜单，但我希望它用于选择过滤器。所以问题是当你选择一个过滤器选项时，下拉菜单就会消失。我只希望菜单在选择单词过滤器时显示并消失。我想我只是需要更多的 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');
    });
});

Answer 1

您可能希望将“过滤器”文本放在某个元素上，然后在其上切换。

<a id="toggle">Filters</a>

然后您的脚本将是:

function DropDown1(me) {
this.dd = me;
this.initEvents();
}

DropDown1.prototype = {
initEvents : function() {
    var obj = this;
    obj.dd.on('click','#toggle', function(event){
        $(this).parent().toggleClass('active');

    }); 
}
}

$(function() {
    var dd = new DropDown1( $('#vv') );
    $(document).click(function() {
        // all DropDown1s
        $('.fill_box').show('active');
    });
});

这是 fiddle

---

随着 <a>标记，您需要单击确切的文本才能触发事件。如果这不能很好地工作，那么你需要改变它的 display阻止，#toggle { display:block;}或者您可以将其更改为 <div> . jsfiddle