我正在尝试使用 div 和 jQuery 设计一个下拉菜单。
预期结果
- 单击父(根)菜单时，会显示下拉菜单。
- 悬停在下拉菜单上时，如果下拉菜单有子菜单，则显示。
- 如果点击远离菜单区域，打开的下拉菜单会隐藏
The fiddle I have created can be found here
<div class="sc-bdVaJa dHnqvJ">
<div class="drop-down">
<div class="drop-down__label">Help</div>
<div class="sc-bdVaJa dHnqvJ">
<div class="drop-down__menu">
<div class="drop-down__row">
<div class="drop-down__check"></div>
<div class="drop-down__text">1. Online Manual</div>
<span class="drop-down__hot-key"></span>
<div class="drop-down__arrow--disable"></div>
</div>
<div class="drop-down__row">
<div class="drop-down__check"></div>
<div class="drop-down__text">2. Contents & Index</div>
<span class="drop-down__hot-key"></span>
<div class="drop-down__arrow--disable"></div>
</div>
<div class="drop-down__row">
<div class="drop-down__check"></div>
<div class="drop-down__text">3. Keyboard Shortcuts</div>
<span class="drop-down__hot-key"></span>
<div class="drop-down__arrow--disable"></div>
</div>
<div class="drop-down__row">
<div class="drop-down__check"></div>
<div class="drop-down__text">4. About...</div>
<span class="drop-down__hot-key"></span>
<div class="drop-down__arrow--disable"></div>
</div>
<div class="drop-down__row">
<div class="drop-down__check"></div>
<div class="drop-down__text">5. Downloads</div>
<span class="drop-down__hot-key"></span>
<div class="drop-down__arrow"></div>
<div style="position: relative;">
<div class="sc-bdVaJa fSbntV">
<div class="drop-down__menu">
<div class="drop-down__row">
<div class="drop-down__check"></div>
<div class="drop-down__text">1. API Doc</div>
<span class="drop-down__hot-key"></span>
<div class="drop-down__arrow--disable"></div>
</div>
<div class="drop-down__row--disable">
<div class="drop-down__check"></div>
<div class="drop-down__text">2. FAQ (PDF)</div>
<span class="drop-down__hot-key"></span>
<div class="drop-down__arrow--disable"></div>
</div>
<div class="drop-down__row">
<div class="drop-down__check"></div>
<div class="drop-down__text">3. Press Release Docs</div>
<span class="drop-down__hot-key"></span>
<div class="drop-down__arrow"></div>
<div style="position: relative;">
<div class="sc-bdVaJa fSbntV">
<div class="drop-down__menu">
<div class="drop-down__row">
<div class="drop-down__check"></div>
<div class="drop-down__text">1. First Qtr </div>
<span class="drop-down__hot-key"></span>
<div class="drop-down__arrow--disable"></div>
</div>
<div class="drop-down__row--disable">
<div class="drop-down__check"></div>
<div class="drop-down__text">2. Second Qtr </div>
<span class="drop-down__hot-key"></span>
<div class="drop-down__arrow--disable"></div>
</div>
<div class="drop-down__row">
<div class="drop-down__check"></div>
<div class="drop-down__text">3. Third Qtr </div>
<span class="drop-down__hot-key"></span>
<div class="drop-down__arrow--disable"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="drop-down__row">
<div class="drop-down__check"></div>
<div class="drop-down__text">6. Live Chat</div>
<span class="drop-down__hot-key"></span>
<div class="drop-down__arrow--disable"></div>
</div>
</div>
</div>
</div>
</div>
最佳答案
在这里你可以通过点击来完成。
$(document).click(function(e) {
e.stopPropagation();
var container = $(".drop-down");
//check if the clicked area is dropDown or not
if (container.has(e.target).length === 0) {
$('.drop-down__menu').hide();
}
});
/* $('div.submenu').hide(); */
$('.drop-down__arrow').hover(function() {
debugger
if ($('.submenu', this).length > 0) {
$(this).find('.submenu').css({
display: "grid"
});
}
}, function() {
if ($('.submenu', this).length > 0) {
$('.submenu').hide();
}
});
$('.drop-down').on("click", function() {
$(this).find('.drop-down__menu').css({
display: "grid"
});
$(this).find('.drop-down__row .fSbntV').css({
display: "none"
});
});.dHnqvJ {
left: 0;
top: 20px;
right: initial;
bottom: initial;
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-size: 11px;
border-bottom: 1px solid transparent;
}
.dHnqvJ .drop-down__row {
position: relative;
display: contents;
}
.dHnqvJ .drop-down__row:hover>*:not(:nth-child(5)) {
background: #e99f17;
-webkit-filter: invert(100%);
filter: invert(100%);
}
.dHnqvJ .drop-down__row:hover>.drop-down__check>.drop-down__icon {
-webkit-filter: invert(100%);
filter: invert(100%);
}
.dHnqvJ .drop-down__row--active {
position: relative;
display: contents;
}
.dHnqvJ .drop-down__row--active>.drop-down__check>.drop-down__icon {
-webkit-filter: invert(100%);
filter: invert(100%);
}
.dHnqvJ .drop-down__row--active>*:not(:nth-child(5)) {
background: #e99f17;
-webkit-filter: invert(100%);
filter: invert(100%);
}
.dHnqvJ .drop-down__row--disable {
display: contents;
color: #8c8c8cb5;
cursor: not-allowed
}
.dHnqvJ .drop-down__row--disable:hover>* {
background: #e99f17;
-webkit-filter: invert(100%);
filter: invert(100%);
}
.dHnqvJ .drop-down__title {
padding: 0 7px;
height: 100%;
line-height: 20px;
color: white;
background-color: #1660e8;
}
.dHnqvJ .drop-down__menu {
background-color: #fff;
z-index: 1;
padding: 2px;
line-height: 18px;
display: none;
background-color: #fff;
position: absolute;
box-shadow: 2px 2px 1px rgb(100, 100, 100);
border: 1px solid gray;
grid-template-columns: 16px auto auto 15px 0px;
}
.dHnqvJ .drop-down__separator {
grid-column: 1 / 5;
height: 7px;
padding: 3px 1px;
background-color: rgba(0, 0, 0, 0.2);
background-clip: content-box;
}
.dHnqvJ .drop-down__check {
grid-column: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.dHnqvJ .drop-down__icon {
max-width: 13px;
max-height: 13px;
-webkit-transform: translateX(-2px);
-ms-transform: translateX(-2px);
transform: translateX(-2px);
}
.dHnqvJ .drop-down__text {
white-space: nowrap;
padding-right: 8px;
grid-column: 2;
}
.dHnqvJ .drop-down__hot-key {
white-space: nowrap;
grid-column: 3;
padding-right: 2px;
}
.dHnqvJ .drop-down__arrow {
position: relative;
grid-column: 4;
width: 100%;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.dHnqvJ .drop-down__arrow:before {
width: 0;
height: 0;
border-style: solid;
border-width: 3px 0 3px 3px;
border-color: transparent transparent transparent #000;
content: '';
display: block;
}
.dHnqvJ .drop-down__arrow--disable {
grid-column: 4;
width: 100%;
height: 100%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery Drop-down Menu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sc-bdVaJa dHnqvJ">
<div class="drop-down">
<div class="drop-down__label">Help</div>
<div class="sc-bdVaJa dHnqvJ">
<div class="drop-down__menu">
<div class="drop-down__row">
<div class="drop-down__check"></div>
<div class="drop-down__text">1. Online Manual</div>
<span class="drop-down__hot-key"></span>
<div class="drop-down__arrow--disable"></div>
</div>
<div class="drop-down__row">
<div class="drop-down__check"></div>
<div class="drop-down__text">2. Contents & Index</div>
<span class="drop-down__hot-key"></span>
<div class="drop-down__arrow--disable"></div>
</div>
<div class="drop-down__row">
<div class="drop-down__check"></div>
<div class="drop-down__text">3. Keyboard Shortcuts</div>
<span class="drop-down__hot-key"></span>
<div class="drop-down__arrow--disable"></div>
</div>
<div class="drop-down__row">
<div class="drop-down__check"></div>
<div class="drop-down__text">4. About...</div>
<span class="drop-down__hot-key"></span>
<div class="drop-down__arrow--disable"></div>
</div>
<div class="drop-down__row">
<div class="drop-down__check"></div>
<div class="drop-down__text">5. Downloads</div>
<span class="drop-down__hot-key "></span>
<div class="drop-down__arrow">
<div style="position: relative;">
<div class="sc-bdVaJa fSbntV submenu">
<div class="drop-down__menu">
<div class="drop-down__row">
<div class="drop-down__check"></div>
<div class="drop-down__text">1. API Doc</div>
<span class="drop-down__hot-key"></span>
<div class="drop-down__arrow--disable"></div>
</div>
<div class="drop-down__row--disable">
<div class="drop-down__check"></div>
<div class="drop-down__text">2. FAQ (PDF)</div>
<span class="drop-down__hot-key"></span>
<div class="drop-down__arrow--disable"></div>
</div>
<div class="drop-down__row">
<div class="drop-down__check"></div>
<div class="drop-down__text">3. Press Release Docs</div>
<span class="drop-down__hot-key"></span>
<div class="drop-down__arrow"></div>
<div style="position: relative;">
<div class="sc-bdVaJa fSbntV">
<div class="drop-down__menu">
<div class="drop-down__row">
<div class="drop-down__check"></div>
<div class="drop-down__text">1. First Qtr </div>
<span class="drop-down__hot-key"></span>
<div class="drop-down__arrow--disable"></div>
</div>
<div class="drop-down__row--disable">
<div class="drop-down__check"></div>
<div class="drop-down__text">2. Second Qtr </div>
<span class="drop-down__hot-key"></span>
<div class="drop-down__arrow--disable"></div>
</div>
<div class="drop-down__row">
<div class="drop-down__check"></div>
<div class="drop-down__text">3. Third Qtr </div>
<span class="drop-down__hot-key"></span>
<div class="drop-down__arrow--disable"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="drop-down__row">
<div class="drop-down__check"></div>
<div class="drop-down__text">6. Live Chat</div>
<span class="drop-down__hot-key"></span>
<div class="drop-down__arrow--disable"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>关于jquery - 使用jQuery的div下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57626052/