JavaScript下拉菜单

我已经创建了一个可以工作的下拉菜单，但我希望它可以用来选择过滤器。因此，问题是当您选择一个过滤器选项时，下拉列表就会消失。我只想在选择单词过滤器时，菜单显示并消失。我想我只是需要更多的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>

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

试试这个：

---

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

如果要阻止click事件从下拉菜单中传播出去，请使用它

我更新了你的小提琴

这就是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元素有一个click侦听器，可以在视图中切换内容。您希望能够单击此div中的项目，因此需要确保单击事件不会出现在vv click侦听器中。要做到这一点，只需调用stopPropagation。

您可能希望在元素上放置过滤器文本，然后将其切换

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

这是你的电话号码

---

使用

你可以做很多事情，但我建议你不要依赖Javascript，因为有些人关闭了它，或者默认情况下已经关闭了它，所以我建议你倾向于css部分。。。还有什么吗？

你能发布一个实时演示来重现这个问题吗？你能在$'中提供活动的css吗？填充框。显示“活动”；？下面是一个示例：这正是我所做的。在我的回答中，我移动了标记上的click事件处理程序，然后将其目标指向其父级。fill_框切换到toggleClass。我没有完全从其父.fill\u框中移动.dropdown1。因此，我可以保留与原作相同的CSS/动画效果。

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

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

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