文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >用于弹出类别列表的JavaScript不起作用

问用于弹出类别列表的JavaScript不起作用
EN

Stack Overflow用户
提问于 2018-06-09 03:07:15
回答 2查看 62关注 0票数 0

我需要一个HTML中的JS函数的帮助。我做了一个带有按钮的侧边导航，并使用JS弹出类别列表。当我在它们外面单击时，它们应该隐藏起来，但它们堆叠在一起。你能告诉我我的错误在哪里吗？我已经没有什么想法了。

也许问题是我对每个按钮都使用了不同的函数。但当我尝试了一个，它也不起作用。

​

​

​

代码语言：javascript
复制
// 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');
    }
  }
}
代码语言：javascript
复制
/* 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;
  }
}
代码语言：javascript
复制
<!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>

​

javascript
html
css
function
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-06-09 03:21:36

正在执行的唯一代码是最后一个window.onclick (您正在重新定义'window.onclick')

解决方案：

​

代码语言：javascript
复制
// 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");
}

​

这是我的第一个回答，所以，请原谅我的不专业，我的英语=)

票数 0
EN

Stack Overflow用户

发布于 2018-06-09 20:05:04

所以我终于想通了。为了让drop类别正确响应，我必须为每个类别创建单独的按钮(我指的是单独的类)，这结合了Alberto Guilherme对JS函数的回答，解决了这个问题。

​

代码语言：javascript
复制
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");
}
代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/50767009

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档