Question

我试图通过试验和错误来学习javascript，我创建了一个下拉菜单，里面可能有很多不合法的代码..我如何以正确的方式创建它？任何指针都会受到赞赏！

JS：

function dropdown() {
    var dropdownTrigger = document.getElementById("dd");
    var dropdownTrigger2 = document.getElementById("dd2");
    var dropdownTrigger3 = document.getElementById("dd3");
    var dropdownTrigger4 = document.getElementById("dd4");

    if (dropdownTrigger.style.display == "none") {
        dropdownTrigger.style.display="block";
        dropdownTrigger2.style.display="none";
        dropdownTrigger3.style.display="none";
        dropdownTrigger4.style.display="none";
    }
    else {
        dropdownTrigger.style.display="none";
    }
}
function dropdown2() {
    var dropdownTrigger = document.getElementById("dd");
    var dropdownTrigger2 = document.getElementById("dd2");
    var dropdownTrigger3 = document.getElementById("dd3");
    var dropdownTrigger4 = document.getElementById("dd4");

    if (dropdownTrigger2.style.display == "none") {
        dropdownTrigger.style.display="none";
        dropdownTrigger2.style.display="block";
        dropdownTrigger3.style.display="none";
        dropdownTrigger4.style.display="none";
    }
    else {
        dropdownTrigger2.style.display="none";
    }
}
function dropdown3() {
    var dropdownTrigger = document.getElementById("dd");
    var dropdownTrigger2 = document.getElementById("dd2");
    var dropdownTrigger3 = document.getElementById("dd3");
    var dropdownTrigger4 = document.getElementById("dd4");

    if (dropdownTrigger3.style.display == "none") {
        dropdownTrigger.style.display="none";
        dropdownTrigger2.style.display="none";
        dropdownTrigger3.style.display="block";
        dropdownTrigger4.style.display="none";
    }
    else {
        dropdownTrigger3.style.display="none";
    }
}
function dropdown4() {
    var dropdownTrigger = document.getElementById("dd");
    var dropdownTrigger2 = document.getElementById("dd2");
    var dropdownTrigger3 = document.getElementById("dd3");
    var dropdownTrigger4 = document.getElementById("dd4");

    if (dropdownTrigger4.style.display == "none") {
        dropdownTrigger.style.display="none";
        dropdownTrigger2.style.display="none";
        dropdownTrigger3.style.display="none";
        dropdownTrigger4.style.display="block";
    }
    else {
        dropdownTrigger4.style.display="none";
    }
}

function dropdownAll() {
    var ddaText = document.getElementById("dda");
    var dropdownTrigger1 = document.getElementById("dd");
    var dropdownTrigger2 = document.getElementById("dd2");
    var dropdownTrigger3 = document.getElementById("dd3");
    var dropdownTrigger4 = document.getElementById("dd4");

    if (ddaText.innerHTML == "Open all"){
        ddaText.innerHTML = "Hide all";
        dropdownTrigger1.style.display="block";
        dropdownTrigger2.style.display="block";
        dropdownTrigger3.style.display="block";
        dropdownTrigger4.style.display="block";
    }
    else {
        ddaText.innerHTML = "Open all";
        dropdownTrigger1.style.display="none";
        dropdownTrigger2.style.display="none";
        dropdownTrigger3.style.display="none";
        dropdownTrigger4.style.display="none";
    }
}

HTML：

<div class="left-menu">
                    <p>Menu</p>
                    <br>
                    <a href="#" onclick="dropdown()"> +Menu 1</a>
                    <ul id="dd" style="display:none;">
                        <li><a href="#">item 1:1</a></li>
                        <li><a href="#">item 1:2</a></li>
                        <li><a href="#">item 1:3</a></li>
                        <li><a href="#">item 1:4</a></li>
                    </ul>
                    <a href="#" onclick="dropdown2()"> +Menu 2</a>
                    <ul id="dd2" class="dropdown" style="display:none;">
                        <li><a href="#">item 2:1</a></li>
                        <li><a href="#">item 2:2</a></li>
                        <li><a href="#">item 2:3</a></li>
                        <li><a href="#">item 2:4</a></li>
                    </ul>
                    <a href="#" onclick="dropdown3()"> +Menu 3</a>
                    <ul id="dd3" class="dropdown" style="display:none;">
                        <li><a href="#">item 3:1</a></li>
                        <li><a href="#">item 3:2</a></li>
                        <li><a href="#">item 3:3</a></li>
                        <li><a href="#">item 3:4</a></li>
                    </ul>
                    <a href="#" onclick="dropdown4()"> +Menu 4</a>
                    <ul id="dd4" class="dropdown" style="display:none;">
                        <li><a href="#">item 4:1</a></li>
                        <li><a href="#">item 4:2</a></li>
                        <li><a href="#">item 4:3</a></li>
                        <li><a href="#">item 4:4</a></li>
                    </ul>
                    <a href="#" id="dda" onclick="dropdownAll()">Open all</a>
                </div>

是否可以为此创建增加或某种循环的函数？

Answer 1

也许考虑一下这个问题。此函数使用三元运算符来检查显示值是设置为块还是无，并相应地进行切换。

<button href="#" onclick="toggleDisplay(document.getElementById('dd'))"> +Menu 1</button>
<ul id="dd" style="display:none;">
    <li><a href="#">item 1:1</a></li>
    <li><a href="#">item 1:2</a></li>
    <li><a href="#">item 1:3</a></li>
    <li><a href="#">item 1:4</a></li>
</ul>
<script>
    function toggleDisplay(el){
        el.style.display === 'none' ? // Is it invisible?
        el.style.display = 'block' :  // Then use this
        el.style.display = 'none'     // If not the use this
    }
</script>

编辑：误读;不要使用<select>元素。

我会更好地解释这里发生的事情。函数toggleDisplay(el)将元素作为参数。

<button onclick=toggleDisplay( <your element goes here> )>

现在我们传递的元素有一个style对象，我们可以访问并对其进行更改。您可以在此w3school参考。

编辑2：这是另一个将事件附加到HTML类列表中的元素的解决方案。事件切换当前元素的直接兄弟元素。您可以将它与您可能需要的任意数量的不同组合一起使用。这样，您就不会在HTML中使用任何内联JavaScript，也不必单独插入每个元素。

我和其他大多数人都会建议尝试使用jQuery进行这种DOM遍历和事件处理。 DOM在浏览器兼容性和遍历涉及的头痛方面绝对可怕。 jQuery解决了很多问题。

＆＃13;

// this returns a list of your buttons with the class name 'toggle-button'
var buttons = document.getElementsByClassName('toggle-button')

// here we iterate over them to individually modify 
for (var i = 0; i <= buttons.length-1; i++){

    // here we take the current button and we add an event listener to it
    buttons[i].addEventListener('click', function(){

            // 'this' refers to buttons[i] that we are targeting with our event
            var el = this.nextElementSibling // nextElementSibling is the ul

            el.style.display === 'none' ? // Is it invisible?
            el.style.display = 'block' :  // Then use this
            el.style.display = 'none'     // If not then use this

    })  

}

＆＃13;

<button class="toggle-button"> +Menu 1</button>
<ul id="dd0" style="display:none;">
    <li><a href="#">item 1:1</a></li>
    <li><a href="#">item 1:2</a></li>
    <li><a href="#">item 1:3</a></li>
    <li><a href="#">item 1:4</a></li>
</ul>
<button class="toggle-button"> +Menu 1</button>
<ul id="dd1" style="display:none;">
    <li><a href="#">item 2:1</a></li>
    <li><a href="#">item 2:2</a></li>
    <li><a href="#">item 2:3</a></li>
    <li><a href="#">item 2:4</a></li>
</ul>
<button class="toggle-button"> +Menu 1</button>
<ul id="dd2" style="display:none;">
    <li><a href="#">item 3:1</a></li>
    <li><a href="#">item 3:2</a></li>
    <li><a href="#">item 3:3</a></li>
    <li><a href="#">item 3:4</a></li>
</ul>

＆＃13;

Answer 2

解决当前问题的CSS唯一解决方案

您目前正在尝试解决的问题可以在不使用javascript的情况下实现，并且最终可能是更清晰，更具伸缩性的解决方案。

理论：

我们使用包裹菜单元素的<input type="number" id="numId201612130" onchange = 'checknumber(numId201612130);'> <input type="number" id="numId201612131" onchange = 'checknumber(numId201612131);'> <input type="number" id="numId201612140" onchange = 'checknumber(numId201612140);'> <input name='btnSaveTmrow' type='button' value='Save' onClick='fnSaveTmrow();'>，并且只要这个被悬停（div属性），我们就会显示菜单。如果我们关心，我们甚至可以添加一个漂亮的小动画。

＆＃13;

:hover

＆＃13;

希望这会有所帮助。它可能不是一个完美的解决方案，但它应该清理您当前的情况并提供更小，更易于维护的代码库。

我明白你所追求的是学习javascript，但除了打开菜单之外，还有其他更有趣的机会，比如https://projecteuler.net/或https://www.codingame.com/

Answer 3

你可以使用JQuery，

<a class="menu1" href="#"> +Menu 1</a>
<ul id="dd" style="display:none;">
    <li><a href="#">item 1:1</a></li>
    <li><a href="#">item 1:2</a></li>
    <li><a href="#">item 1:3</a></li>
    <li><a href="#">item 1:4</a></li>
</ul>
<a class="menu2" href="#"> +Menu 2</a>
<ul id="dd2" style="display:none;">
    <li><a href="#">item 2:1</a></li>
    <li><a href="#">item 2:2</a></li>
    <li><a href="#">item 2:3</a></li>
    <li><a href="#">item 2:4</a></li>
</ul>

这是JQuery代码：

$(document).ready(function() {
    $(".menu1").toggle(function() {
            function() {$("#dd").css("display", "block");},
            function() {$("#dd").css("display", "none");}
    });
    $(".menu2").toggle(function() {
            function() {$("#dd2").css("display", "block");},
            function() {$("#dd2").css("display", "none");}
    });
});

使代码更小的功能

3 个答案:

解决当前问题的CSS唯一解决方案

理论：