用于弹出类别列表的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>
2 个答案:
答案 0 :(得分：1)
所以我终于明白了。为了使drop类别能够正确响应，我必须为每个类别制作单独的按钮（我的意思是单独的类）这与Alberto Guilherme为JS函数给出的答案相结合解决了问题。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
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>
答案 1 :(得分：0)
正在执行的唯一代码是最后一个window.onclick（
你正在重新定义'window.onclick'）
解决方案：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
// 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");
}
window.onclick = function(e) {
if (!e.target.matches('.dropbtn ')) {
var moda = document.getElementById("moda");
if (moda.classList.contains('show')) {
moda.classList.remove('show');
}
var obzavejdane = document.getElementById("obzavejdane");
if (obzavejdane.classList.contains('show')) {
obzavejdane.classList.remove('show');
}
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");
}
这是我的第一个答案，所以，原谅缺乏专业性，我的英语=）
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？