实现一个下拉框

最新推荐文章于 2022-06-01 10:53:51 发布

违规昵称001

最新推荐文章于 2022-06-01 10:53:51 发布

阅读量249

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/m0_37528005/article/details/103324421

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

=下拉效果

1.`
let flag = false;
$(".hw-user-name").on(“click”, function () {
// console.log(“ss”);
flag = !flag;
if (flag == true) {
$(".arrow-top-bottom").addClass(“user-avatar-toggle_on”).removeClass(“user-avatar-toggle”);
} else {
$(".arrow-top-bottom").addClass(“user-avatar-toggle”).removeClass(“user-avatar-toggle_on”);
}

})
$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots console.log($ (".js-user-nav-dropdown").css(“display”));
})
第一种方法只能在点击固定区域显示隐藏,实现的是三角的切换,但是当点击任意区域隐藏下拉框时,三角会出现bug

2.正确方式
document.onclick = function (e) {
$(".js-user-nav-dropdown").hide();
$(".arrow-top-bottom").addClass(“user-avatar-toggle”).removeClass(“user-avatar-toggle_on”);
console.log(“ss”);
}

$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots (e) { if ($ (".js-user-nav-dropdown").css(“display”) == “none”) {
$(".js-user-nav-dropdown").show();
$(".arrow-top-bottom").addClass(“user-avatar-toggle_on”).removeClass(“user-avatar-toggle”);
console.log(“d”);
} else {
$(".js-user-nav-dropdown").hide();
$(".arrow-top-bottom").addClass(“user-avatar-toggle”).removeClass(“user-avatar-toggle_on”);
console.log(“tt”);
}
e = e || event;
stopFunc(e);
});

$(’.js-user-nav-dropdown’).on(“click”, function (e) {
e = e || event;
stopFunc(e);
});
function stopFunc(e) {
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
}
`