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

Answer 2

您希望阻止点击事件从下拉菜单中传播出去。

我更新了你的小提琴。 http://jsfiddle.net/k73s8/6/

$(".dropdown1").click(function(e) {
    e.stopPropagation();
});

http://api.jquery.com/event.stopPropagation/

这就是 HTML 的样子。

<div id="vv" class="fill_box active">
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>

id 为“vv”的根 div 元素有一个点击监听器，用于切换内容的进出视图。您希望能够单击此 div 内的项目，因此您需要确保单击事件不会冒泡到 vv 单击侦听器。为此，只需调用 stopPropagation。

Answer 3

试试这个：

http://jsfiddle.net/k73s8/1/

<div id="vv" class="fill_box">
    Filters
 </div>

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

P.S：您确实单击了整个文档上的事件，不知道为什么……所以我也这样做了。我猜这是其他概念的一部分。如果没有，我建议不要使用它，而是在id=vv div 上使用点击事件

Answer 4

好吧，您可以做很多事情，但我建议您不要依赖 Javascript，因为有些人将其关闭或默认情况下已将其关闭，因此我建议您倾向于 css 部分...任何事情还有吗？