JavaScript下拉菜单

Question

我已经创建了一个下拉菜单，它可以正常工作，但我希望它被用来选择过滤器。问题是当您选择一个过滤器选项时，下拉菜单会消失。我只想在选择“filters”单词时显示和隐藏菜单。我认为我只需要更多的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');
    });
});

- user2985495

---

你能发布一个实时演示来重现这个问题吗？ - elclanrs

你能提供 $('.fill_box').show('active'); 中 active 的 CSS 吗？ - Josh Powell

这是一个例子：http://jsfiddle.net/k73s8/ - user2985495

Answer 1

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

我已经更新了您的 fiddle。 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。

- sissonb

Answer 2

您可以将“Filters”文本放在一个元素上，然后对其进行切换。

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

这里有一个演示

---

使用<a>标签时，您需要点击确切的文本才能触发事件。如果这不起作用，则需要将其display更改为block，#toggle { display:block;}，或者您可以将其更改为<div>。jsfiddle

- Mark S

---

这就是我所做的。 - Ani

在我的答案中，我将点击事件处理程序移动到了<a>标签上，然后将其父级.fill_box作为目标来执行toggleClass()。我并没有完全将.dropdown1从其父级.fill_box中移除，因此可以保留原始CSS/动画效果。 - Mark S

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

附言：您在整个文档上添加了点击事件，不确定为什么...所以我也这样做了。我猜它是其他概念的一部分。如果不是，我建议不要使用它，而是在id=vv div上使用点击事件。

- Ani

Answer 4

有多种方法可以做到这一点，但我建议不要依赖JavaScript，因为有些人会关闭它，或者默认情况下已经关闭它，所以我建议你更倾向于CSS方面的事情...还有其他问题吗？

- user2805476