用于弹出类别列表的 JavaScript 不起作用-6ren

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

转载作者：太空宇宙更新时间：2023-11-04 07:15:15

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

也许问题是我为每个按钮使用了不同的功能。但是，当我一劳永逸地尝试时，它也没有用。

screenshot of stacked lists

// 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>

关于用于弹出类别列表的 JavaScript 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50767009/

文章推荐： java - 在纹理中重叠像素图

文章推荐： python - amin 中的条件

jQuery 弹出/弹出
我连续有 11 个图像，如果鼠标悬停在其中一个图像上，我希望弹出一个弹出窗口。所以每 11 个图像都有不同的弹出窗口。我已经有一些代码可以执行此操作，但它仅适用于第一张图像。代码:index.htm
cocoa - 弹出 NSColorPanel？
是否可以从 NSColorWell 制作一个 NSColorPanel“弹出”，几乎像一个弹出菜单？我不喜欢它作为调色板的实现方式，因为有时它与哪个 NSColorWell 关联并不明显。谢谢!
cocoa - 弹出 NSStatusItem
我正在考虑一个想法，基本上我想要一个带有 NSPopoverController 的 NSStatusItem 。我读到了人们遇到的所有问题，但我只是想尝试一下。现在有干净的方法吗？我见过的所有版本都
JavaScript 弹出 url
如何获取 JS 打开的弹出窗口的 url。这是我的代码: var _url = 'someurlhere'; var popupwindow = window.open(_url, "Popu
javascript - 如何在新窗口中打开网页(弹出)
我正在设计一个网页，我希望当用户单击链接时，弹出窗口(新窗口)将打开一个链接网页。我的代码如下所示 function win(add,w,h) { window.open(add,"","widt
c - 简单的堆栈，弹出
我正在寻找 C 中的简单堆栈实现，并找到了类似的东西: void pop(struct stack **top) { struct stack *temp; temp = malloc(s
c# - 弹出 - 阻止了带有来源的框架
我正在尝试使用 paypal 实现登录，我有 2 个不同的主机域 1- www.example.com 2- www.example.de 对于 paypal，我需要为此目的选择一个返回 URL，我选
ios - “弹出”查看动画
我正在尝试找出如何复制此处显示的“弹出式” View 动画:https://imgur.com/a/irFqdiP .我正在使用当前代码来显示我的 viewController，但目前只有一个淡入淡出
Windows CDROM 弹出
有谁知道在 Windows 2000 或更高版本上以编程方式关闭 CD 托盘的方法？打开 CD 托盘存在，但我似乎无法关闭它，尤其是在 W2k 下。如果可能的话，我特别想从批处理文件中寻找一种方法来
javascript - 弹出 "over"网页时叫什么？
当您访问http://www.daniweb.com时你得到一个弹出窗口，这叫什么 + 知道怎么做吗？感谢您的回复，只有模态加载动画的最简单方法是什么，即页面加载时动画显示以及动画何时完成？ ASP
c# - 来自过滤器代码的音频点击/弹出
我正在为 Unity 引擎中的音频过滤器创建一个 C# 脚本。我的问题是，在通过我的过滤器运行后，生成的音频具有一致且频繁的“咔哒声”、“砰砰声”或“跳过声”。听起来有点像旧 radio 。我不确
javascript - 隐藏浏览器的地址栏(弹出)
我必须隐藏浏览器的地址栏。我正在使用这段代码: var winFeature = 'location=no,toolbar=no,menubar=no,scrollbars=yes,r
iOS中利用inputView 弹出 picker
推荐一个button 弹起pickerview的源码，也可以作为工具类使用。利用inputview 做键盘弹起动画。该如何做呢？ 1.继承uiview 2.重写属性&方法
excel - 阻止文件现在可用弹出 Excel
我在这里有一个问题，我已经工作了几个小时。我正在导入一个 Excel 文件，并使用此代码来执行此操作: Dim objExcel As Excel.Application Di
iphone - 弹出 UIView 会使应用程序崩溃
我基本上是从 UITableViewController 推送 UIView，它包含的只是 UIWebView。但是，当我删除 UIView 以返回到 UITableView 时，应用程序崩溃了。 -
uinavigationcontroller - 弹出 UINavigationController 时崩溃
我有几个由导航 Controller 控制的 View Controller 。例如，viewController A 和 viewController B 都可以将 viewController
email - 是否有网址打开全屏(弹出)中具有特定邮件ID的Gmail撰写窗口
我使用新的Gmail API为用户创建草稿。 API响应提供了新创建的消息ID。然后，我可以使用URL https://mail.google.com/mail/#drafts?compose=[m
data-structures - Redis列表如何允许索引和恒定时间的左右推送/弹出？
Redis列表实现了哪种内部数据结构以实现这一目的？链表将需要O(n)索引，而数组将需要O(n)左/右推/弹出。最佳答案根据official documentation，它们被实现为linked
WPF 弹出 UI 显示黑色
我正在使用 WPF Popup 控件，它显示背景为黑色。我在其中放置了一个 StackPanel 并设置了 Background="Transparent"，但这没有帮助。
javascript - 弹出 block - jQuery
我希望页面内的容器在事件时占据页面的整个宽度并覆盖在其他所有内容上。这是我目前所拥有的，但它没有按我想要的方式工作: $(function() { $('.main a').click( fu

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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