当我点击外部关闭时下拉列表答案

【问题标题】：drop downlist when I click outside close当我点击外部关闭时下拉列表
【发布时间】：2017-12-29 19:26:07
【问题描述】：

我正在使用这个下拉列表插件；

https://tympanus.net/Development/SimpleDropDownEffects/index4.html

当我点击外部关闭时，我希望关闭下拉列表。

它的 js 文档；

查看源代码：https://tympanus.net/Development/SimpleDropDownEffects/js/jquery.dropdown.js

谢谢大家。

【问题讨论】：

标签： javascript php css

【解决方案1】：

on you click ul change height and add class cd-active

轻松移除等级和高度

$('.cd-dropdown').blur(function () {
                $(this).removeClass('cd-active');
                $('.cd-dropdown ul').css('height', 'auto');
            });

或

$(document).on('blur','.cd-dropdown',function () {
                $(this).removeClass('cd-active');
                $('.cd-dropdown ul').css('height', 'auto');
            });

【讨论】：

你可以在 js 文件中使用它，你可以在这个标签中使用相同的并且你需要 JQuery CDN 或 JQuery文件以读取此代码
谢谢你按你说的用了，但是没用
$('.cd-dropdown').focusout(function () { $(this).removeClass('cd-active'); $('.cd-dropdown ul').css('height', 'auto'); $('.cd-dropdown ul li').css('top', '0px'); });

【解决方案2】：

这个插件没有这个选项。但是您可以使用事件的上升。处理程序末尾元素的故事，它将检查列表中是否有任何已单击的项目，然后将其关闭

看看我的例子...

codepen.io/Hydrock/pen/zPyjQG

【讨论】：

【解决方案3】：

试试这个

$('.cd-dropdown').focusout(function () {
                $(this).removeClass('cd-active');
                $('.cd-dropdown ul').css('height', 'auto');
                $('.cd-dropdown ul li').css('top', '0px');
            });

【讨论】：

我正在尝试
我猜，添加到错误的地方，我在之后添加到 js 文件中，不幸的是没有
看，如果你可以在没有文件的 html 页面中编写这段代码作为 javascript，如果你创建文件 javascript，你不需要脚本标签
这样使用脚本标签https://www.w3schools.com/js/js_variables.asp
是的，我按照你说的做了，添加到 - jquery.dropdown.js

【解决方案4】：

$('.cd-dropdown').focusout(function () {
            $(this).removeClass('cd-active');
            $('.cd-dropdown ul').css('height', 'auto');
            $('.cd-dropdown ul li').css('top', '0px');
        });

在我的 js 文件中不是这样的。 $(this).removeClass('cd-active'); xx

像这样 $(this).removeClass('cd-actives');

我以前变过，后来才注意到谢谢解决了

【讨论】：