javascript - 用于弹出类别列表的 JavaScript 不起作用
问题描述
我需要有关 HTML 中的 JS 函数的帮助。我用按钮制作了一个侧面导航,并使用 JS 弹出类别列表。当我在它们外部单击时,它们应该隐藏起来,但它们会堆叠在一起。你能告诉我我的错误在哪里吗?我没有任何想法了。
也许问题是我为每个按钮使用了单独的功能。但是,当我尝试使用一个时,它也不起作用。
// JavaScript Document
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function funcmoda() {
document.getElementById("moda").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn ')) {
var moda = document.getElementById("moda");
if (moda.classList.contains('show')) {
moda.classList.remove('show');
}
}
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function funcfurn() {
document.getElementById("obzavejdane").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn ')) {
var obzavejdane = document.getElementById("obzavejdane");
if (obzavejdane.classList.contains('show')) {
obzavejdane.classList.remove('show');
}
}
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function funcfabric() {
document.getElementById("tekstil").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn ')) {
var tekstil = document.getElementById("tekstil");
if (tekstil.classList.contains('show')) {
tekstil.classList.remove('show');
}
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
#div1 {}
.navbar {
width: 200px;
height: 100%;
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.column {
float: left;
}
/* Style links inside the columns */
.column a {
float: none;
color: black;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a background color on hover */
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
background-color: #16AA9E;
}
.dropbtn {
width: 200px;
}
.column #subcolumn {}
.dropdown-content {
margin-left: 200px;
display: none;
position: absolute;
background-color: #f9f9f9;
width: auto;
height: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
text-wrap: suppress;
float: none;
color: black;
font-size: 12px;
padding: 14px 16px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
h2 {
font-size: 16px;
color: #000000;
text-align: center;
}
h3 {
font-size: 13px;
text-align: center;
}
.show {
display: block;
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="sidenavtry.css" rel="stylesheet" type="text/css">
<link href="sidenav.js" rel="scriptsheet" type="text/javascript">
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
<script src="sidenav.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="div1" class="fluid">
<div class="navbar">
<div class="dropdown">
<button class="dropbtn" id="btnModa" onclick="funcmoda()">Мода
</button>
<div class="dropdown-content" id="moda">
<div class="row">
<div class="column">
<h2>За нея</h2>
<div class="column" id="subcolumn">
<h3>Дрехи</h3>
<a href="#">Тениски</a>
<a href="#">Блузи</a>
<a href="#">Панталони и дънънки</a>
<a href="#">Поли и рокли</a>
<a href="#">Якета и палта</a>
<a href="#">Спортни екипи</a>
<a href="#">Бельо</a>
</div>
<div class="column" id="subcolumn">
<h3>Обувки</h3>
<a href="#">Маратонки и кецеве</a>
<a href="#">Ежедневни обувки</a>
<a href="#">Обувки на ток</a>
<a href="#">Обувки на платформа</a>
<a href="#">Чехли и сандали</a>
<a href="#">Боти</a>
<a href="#">Ботуши</a>
<h3>Аксесоари</h3>
<a href="#">Колани</a>
<a href="#">Слъчеви очила</a>
<a href="#">Бижута и часовници</a>
<a href="#">Фиби, шноли и ластици</a>
<a href="#">Портфейли</a>
</div>
<div class="column" id="subcolumn">
<h3>Чанти и раници</h3>
<a href="#">Чанти за през рамо</a>
<a href="#">Пазарски чанти</a>
<a href="#">Клъч</a>
<a href="#">Пощальонска</a>
<a href="#">Раници</a>
<a href="#">Тип сак</a>
<a href="#">Тип кош</a>
<a href="#">Докторска</a>
<a href="#">Сетове чанти</a>
</div>
</div>
<div class="column">
<h2>За него</h2>
<div class="column" id="subcolumn">
<h3>Дрехи</h3>
<a href="#">Тениски</a>
<a href="#">Блузи</a>
<a href="#">Панталони и дънки</a>
<a href="#">Якета и палта</a>
<a href="#">Спортни екипи</a>
<a href="#">Бельо</a>
<h3>Обувки</h3>
<a href="#">Маратонки и кецеве</a>
<a href="#">Ежедневни обувки</a>
<a href="#">Чехли и сандали</a>
<a href="#">Боти</a>
<a href="#">Ботуши</a>
</div>
<div class="column" id="subcolumn">
<h3>Чанти и раници</h3>
<a href="#">Чанти</a>
<a href="#">Раници</a>
<h3>Аксесоари</h3>
<a href="#">Колани</a>
<a href="#">Слъчеви очила</a>
<a href="#">Бижута и часовници</a>
<a href="#">Вратовръзки и папионки</a>
<a href="#">Портфейли</a>
</div>
</div>
<div class="column">
<h2>За детето</h2>
<div class="column" id="subcolumn">
<h3>Бебешки дрехи</h3>
<a href="#">Бодита</a>
<a href="#">Блузи</a>
<a href="#">Панталони</a>
<a href="#">Спортни екипи</a>
<a href="#">Поли и рокли</a>
<a href="#">Лигавници</a>
<a href="#">Чорапи</a>
</div>
<div class="column" id="subcolumn">
<h3>Дрехи за момичета</h3>
<a href="#">Тениски</a>
<a href="#">Блузи</a>
<a href="#">Панталони и дънки</a>
<a href="#">Рокли и поли</a>
<a href="#">Спортни екипи</a>
<a href="#">Якета и палта</a>
<a href="#">Бельо</a>
</div>
<div class="column" id="subcolumn">
<h3>Дрехи за момчета</h3>
<a href="#">Тениски</a>
<a href="#">Блузи</a>
<a href="#">Панталони и дънки</a>
<a href="#">Спортни екипи</a>
<a href="#">Якета и палта</a>
<a href="#">Бельо</a>
<h3>Обувки</h3>
<a href="#">Ританки</a>
<a href="#">Обувки за момичета</a>
<a href="#">Обувки за момчета</a>
</div>
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn" id="btnFurn" onclick="funcfurn()">Обзавеждане
</button>
<div class="dropdown-content" id="obzavejdane">
<div class="row">
<div class="column">
<div class="column" id="subcolumn">
<h3>Спалня</h3>
<a href="#">Легла</a>
<a href="#">Гардероби</a>
<a href="#">Шкафове</a>
<a href="#">Модулни системи</a>
</div>
<div class="column" id="subcolumn">
<h3>Хол</h3>
<a href="#">Мека мебел</a>
<a href="#">Холни маси</a>
<a href="#">Етажерки</a>
<a href="#">Модулни системи</a>
</div>
<div class="column" id="subcolumn">
<h3>Трапезаря</h3>
<a href="#">Маси</a>
<a href="#">Столове</a>
<a href="#">Шкафове</a>
<a href="#">Модулни системи</a>
</div>
<div class="column" id="subcolumn">
<h3>Кухня</h3>
<a href="#">Горни шкафове</a>
<a href="#">Долни шкафове</a>
<a href="#">Помощни маси</a>
<a href="#">Мивки</a>
<a href="#">Плотове</a>
<a href="#">Модулни системи</a>
</div>
<div class="column" id="subcolumn">
<h3>Офис</h3>
<a href="#">Бюра</a>
<a href="#">Офис столове</a>
<a href="#">Етажеркки</a>
<a href="#">Шкафове</a>
<a href="#">Модулни системи</a>
</div>
<div class="column" id="subcolumn">
<h3>Детска стая</h3>
<a href="#">Легла</a>
<a href="#">Гардероби</a>
<a href="#">Шкафове</a>
<a href="#">Модулни системи</a>
</div>
<div class="column" id="subcolumn">
<h3>Антре</h3>
<a href="#">Шкафове</a>
<a href="#">.......</a>
<a href="#">.......</a>
<a href="#">.......</a>
<a href="#">.......</a>
</div>
<div class="column" id="subcolumn">
<h3>Декор</h3>
<a href="#">Стенни декорации</a>
<a href="#">Осветление</a>
<a href="#">.....</a>
<a href="#">.....</a>
<a href="#">.....</a>
<a href="#">.....</a>
<a href="#">.....</a>
</div>
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn" id="btnFabric" onclick="funcfabric()">Текстил</button>
<div class="dropdown-content" id="tekstil">
<div class="row">
<div class="column">
<div class="column" id="subcolumn">
<h3>Платове</h3>
<a href="#">Вид плат</a>
<a href="#">Вид плат</a>
<a href="#">Вид плат</a>
<a href="#">Вид плат</a>
<a href="#">Вид плат</a>
<a href="#">Вид плат</a>
<a href="#">Вид плат</a>
<a href="#">Вид плат</a>
</div>
<div class="column" id="subcolumn">
<h3>Домашен текстил</h3>
<a href="#">Долни чаршафи</a>
<a href="#">Горни чаршафи</a>
<a href="#">Калъвки за възглавници</a>
<a href="#">Завивки</a>
<a href="#">Одеала</a>
<a href="#">Килими</a>
<a href="#">Пердета</a>
<a href="#">Покривки</a>
</div>
<div class="column" id="subcolumn">
<h3>Други</h3>
<a href="#">......................</a>
<a href="#">......................</a>
<a href="#">......................</a>
<a href="#">......................</a>
<a href="#">......................</a>
</div>
<div class="column" id="subcolumn">
<h3>Още други</h3>
<a href="#">......................</a>
<a href="#">......................</a>
<a href="#">......................</a>
<a href="#">......................</a>
<a href="#">......................</a>
<a href="#">......................</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
解决方案
所以我终于想通了。为了让放置类别正确响应,我必须为每个类别制作单独的按钮(我的意思是单独的类)这与 Alberto Guilherme 为 JS 函数给出的答案相结合,解决了这个问题。
function funcmoda() {
document.getElementById("moda").classList.toggle("show");
}
window.onclick = function(e) {
if (!e.target.matches('.btnModa ')) {
var moda = document.getElementById("moda");
if (moda.classList.contains('show')) {
moda.classList.remove('show');
}
}
if (!e.target.matches('.btnFurn ')) {
var obzavejdane = document.getElementById("obzavejdane");
if (obzavejdane.classList.contains('show')) {
obzavejdane.classList.remove('show');
}
}
if (!e.target.matches('.btnFabric ')) {
var tekstil = document.getElementById("tekstil");
if (tekstil.classList.contains('show')) {
tekstil.classList.remove('show');
}
}
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function funcfurn() {
document.getElementById("obzavejdane").classList.toggle("show");
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function funcfabric() {
document.getElementById("tekstil").classList.toggle("show");
}
.navbar {
width:200px;
height:100%;
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown .btnModa {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown .btnFurn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown .btnFabric {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .btnModa,
.dropModa:focus {
background-color: #16AA9E;
}
.navbar a:hover,
.dropdown:hover .btnFurn,
.dropFurn:focus {
background-color: #16AA9E;
}
.navbar a:hover,
.dropdown:hover .btnFabric,
.dropModa:focus {
background-color: #16AA9E;
}
.btnModa {
width: 200px;
}
.btnFurn {
width: 200px;
}
.btnFabric {
width: 200px;
}
<div class="navbar">
<div class="dropdown">
<button class="btnModa" onclick="funcmoda()">Мода</button>
<div class="dropdown-content" id="moda">
<div class="dropdown">
<button class="btnFurn" onclick="funcfurn()">Обзавеждане</button>
<div class="dropdown-content" id="obzavejdane"></div>
<div class="dropdown">
<button class="btnFabric" onclick="funcfabric()">Текстил</button>
<div class="dropdown-content" id="tekstil"> </div>
</div>
推荐阅读
- url - Google 应用程序脚本,onclick 和 href 之间的优先级
- python - 为什么我的数据在图表中间被挤压?
- swift - Swift 5 - 从类到类传递数据的问题
- swift - SwiftUI 列表的性能问题
- bluetooth - 如何在代码视觉中修剪字符串的未知第一个字符
- facebook - 来自 Facebook 的 debug_token 响应不成功:input_token 中的 App_id 与查看应用程序不匹配
- xml - 恢复包含在多个文件中的相对链
- postgresql - 为什么我的烧瓶服务器无法使用 docker-compose 与 postgres 数据库通信?
- c# - 转换 Linq IQueryable
到 Linq IQueryable - r - 尝试将点添加到基本 R 图