javascript - 使代码更小的函数

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 解决了很多令人头痛的问题。

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

    })  

}

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