个人中心
gpt4 book ai didi

javascript - 如何在 javascript 中使用 EventListener 下拉或隐藏和显示子菜单？

转载 作者：行者123 更新时间：2023-11-30 14:33:12 27 4
gpt4 key购买 nike

基本上，我的子主题元素是隐藏的，我希望在我们单击主题元素时显示子主题元素，并在我们单击主题时再次隐藏子主题元素。就像隐藏和显示元素一样

我正在尝试将 classList 与 addEventListener 一起使用，当我运行代码时它显示有一个对我不起作用的错误。

我还发现大多数人都在使用 jquery，因为它非常简单，但对我来说，我想先练习 javascript。

我仍然期待适合我的情况。如果有人知道如何使用此功能进行编码，请给我一些解决方案，非常感谢。

这是我的代码，请看一下。

var togglemenu = (function () {
    var togSubtopics = document.getElementById("subtopics");

    togSubtopics.addEventListener("click", function () {
        togSubtopics.classList.toggle("show");
    });

    return {
        togglemenu: togglemenu()
    };
})();
body {
    margin: 0;
}

li, a{
    text-decoration: none;
    list-style-type: none;
    text-decoration-line: none;
    color: black;
}

/*main-menu*/
#mainmenu {
    position: relative;
}

#mainmenu ul {
    margin: 0;
    padding: 0;
}

#mainmenu li {
    display: inline-block;
}

#mainmenu a {
    display: block;
    width: 100px;
    padding: 10px;
    border: 1px solid;
    text-align: center;
}

/*subtopics*/
#subtopics {
    position: absolute;
    display: none;
    margin-top: 10px;
    width: 100%;
    left: 0;
}

.show {
    display: block;
}

#subtopics ul {
    margin: 0;
    padding: 0;
}

#subtopics li {
    display: block;
}

#subTopics a {
    text-align: left;
}

/*columns*/
#column1, #column2, #column3 {
    position: relative;
    float: left;
    left: 125px;
    margin: 0px 5px 0px 0px;
}

/*hover underline*/
#mainmenu li:hover {
    text-decoration: underline;
}
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="index2.css" />
</head>
<body>
    <div id="mainmenu">
        <ul>
            <li><a href="">Logo</a></li>
            <li><a href="">Home</a></li>
            <li><a href="">Topics</a>
                <div id="subtopics">
                    <div id="column1" class="columns">
                        <ul>
                            <li><a href="">example1</a></li>
                            <li><a href="">example2</a></li>
                            <li><a href="">example3</a></li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <script src="index2.js"></script>
</body>
</html>

最佳答案

一种可能的方法:只需单击 - 切换该元素的类(添加或删除类 show)

并在 CSS 中添加规则，将 display: block 赋予 .show 下的 .submenu

UPD 在显示任何元素的子元素之前 - 确保您隐藏了其他打开的子菜单

(function () {
  var menuElems = document.querySelectorAll("#mainmenu ul > li")

  menuElems.forEach(function(elem){
    elem.addEventListener("click", function(){
      
      //hide all open submenus
      menuElems.forEach(function(e){
        e.classList.remove("show");
      })
      
      //show the one that is clicked right now 
      elem.classList.add("show");
    }, false)
  });
})();
body {
    margin: 0;
}

li, a{
    text-decoration: none;
    list-style-type: none;
    text-decoration-line: none;
    color: black;
}

/*main-menu*/
#mainmenu {
    position: relative;
}

#mainmenu ul {
    margin: 0;
    padding: 0;
}

#mainmenu li {
    display: inline-block;
}

#mainmenu a {
    display: block;
    width: 100px;
    padding: 10px;
    border: 1px solid;
    text-align: center;
}

/*subtopics*/
.subtopics {
    position: absolute;
    display: none;
    margin-top: 10px;
    width: 100%;
    left: 0;
}

.show .subtopics{
    display: block;
}

.subtopics ul {
    margin: 0;
    padding: 0;
}

.subtopics li {
    display: block;
}

.subTopics a {
    text-align: left;
}

/*columns*/
#column1, #column2, #column3 {
    position: relative;
    float: left;
    left: 125px;
    margin: 0px 5px 0px 0px;
}

/*hover underline*/
#mainmenu li:hover {
    text-decoration: underline;
}
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="index2.css" />
</head>
<body>
    <div id="mainmenu">
        <ul>
            <li><a href="#">Logo</a></li>
            <li><a href="#">Home</a>
              <div class="subtopics">
                <div id="column1" class="columns">
                  <ul>
                    <li><a href="">Home_example1</a></li>
                    <li><a href="">Home_example2</a></li>
                    <li><a href="">Home_example3</a></li>
                  </ul>
                </div>
              </div>
            </li>
            <li><a href="#">Topics</a>
              <div class="subtopics">
                <div id="column1" class="columns">
                  <ul>
                    <li><a href="">Topic_example1</a></li>
                    <li><a href="">Topic_example2</a></li>
                    <li><a href="">Topic_example3</a></li>
                  </ul>
                </div>
              </div>
            </li>
        </ul>
    </div>

    <script src="index2.js"></script>
</body>
</html>

UPD从 menuElems onclick 到 subtopic

中删除 show 类的代码 

      var subtopicElems = document.querySelectorAll(".subtopics ul > li a")
      subtopicElems.forEach(function(item){
        item.addEventListener("click", function(event){
          menuElems.forEach(function(menuElem){
            menuElem.classList.remove("show")
          })
          event.stopPropagation(); //gotta stop bubbling
        }, false)
      })
about Bubbling and Capturing

关于javascript - 如何在 javascript 中使用 EventListener 下拉或隐藏和显示子菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50848979/

27 4 0
文章推荐： c - 当多个 scanf() 包含在单个 for 循环中时会发生什么
文章推荐： c# - C# Auto Mapper 的性能问题
文章推荐： JavaScript 代码在 AWS EC2 实例上失败
文章推荐： javascript - POST 调用 Controller 的方法以在 MVC 中保存文本框数据
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com