Question

我正在尝试使用javascript创建扩展/折叠菜单。这样的结构。

.menu
   .subItem
   .subItem

这是CSS的一部分

ul.menu {
    display: none
}

但菜单项不会从合拢状态中展开

这是js文件

window.onload = initAll;

function initAll() {
    var allLink = document.getElementsByTagName("a");
    for (var i = 0; i < allLink.length; i++) {
        if (allLink[i].className.indexOf("menuLink") > -1) {

            allLink[i].onclick = togle;
        }

    }
}

function togle() {
    var startMenu = this.href.lastIndexOf("/") + 1;
    var stopMenu = this.href.lastIndexOf(".");
    var thisMenuName = this.href.substring(startMenu, stopMenu);

    var thisMenu = document.getElementById(thisMenuName).style;

    if (thisMenu.display == "block") {
        thisMenu.display = "none";
    } else {
        thisMenu.display = "block";
    }
    return false;
}

当我打开chrome开发人员工具时，我意识到它已被指出单击菜单

var thisMenu = document.getElementById(thisMenuName).style;

又一次又出了什么问题

@Edit：我忘记添加html文件

<link rel="stylesheet" href="css.css">
<script src="js.js"></script>

a
</head>
<body>
 <div>
 <a href="" class="menuLink">trajedi</a>
<ul class="menu" id="menu1">
<li><a href="">deneme</a></li>
<li><a href="">deneme</a></li>
</ul>
</div>

Answer 1

我不知道您打算如何使用togle函数中的substring部分。那是您的代码的唯一问题。更改行：

var thisMenu = document.getElementById(thisMenuName).style;

到

var thisMenu = document.getElementById('menu1').style;

，它将起作用。看看：

    window.onload = initAll;
    
    function initAll() {
        var allLink = document.getElementsByTagName("a");
        for (var i = 0; i < allLink.length; i++) {
            if (allLink[i].className.indexOf("menuLink") > -1) {    
                allLink[i].onclick = togle;
            }        
        }
    }
    
    function togle(e) {
        // can't understand the use of the 3 lines below:
        var startMenu = this.href.lastIndexOf("/") + 1;
        var stopMenu = this.href.lastIndexOf(".");
        var thisMenuName = this.href.substring(startMenu, stopMenu);

        var thisMenu = document.getElementById('menu1').style;
    
        if (thisMenu.display == "block") {
            thisMenu.display = "none";
        } else {
            thisMenu.display = "block";
        }
        return false;
    }

    ul.menu {
        display: none
    }

<div>
    <a href="" class="menuLink">trajedi</a>
    <ul class="menu" id="menu1">
      <li><a href="">deneme</a></li>
      <li><a href="">deneme</a></li>
    </ul>
</div>

一个更简单，更现代的代码版本是：

function initAll() {    
    Array.from(document.getElementsByTagName("a"))
        .filter((link)=>link.className.indexOf("menuLink") > -1)
        .forEach((link)=>link.onclick = ()=>{
            var thisMenu = document.getElementById('menu1').style;
            thisMenu.display = (thisMenu.display == "block") ? 'none' : 'block';
            return false;
        });
}
window.onload = initAll;

ul.menu {
        display: none
    }

<div>
    <a href="" class="menuLink">trajedi</a>
    <ul class="menu" id="menu1">
      <li><a href="">deneme</a></li>
      <li><a href="">deneme</a></li>
    </ul>
</div>

展开/折叠菜单根本不起作用

1 个答案: