HTML / JS Simplification

HTML / JS Simplification

本文关键字：Simplification JS HTML      更新时间：2023-09-26

我正在为客户开发下拉菜单。我认为我的代码太复杂了。我需要一种分辨率/替代方法来执行给定的目标。

<font id="l1b" size="4" color="black" style="cursor:pointer; color:black;"
    onclick="showSubMenu('cat2');
    document.getElementById('cat1').style.display = 'none';
    document.getElementById('cat3').style.display = 'none';
    document.getElementById('cat4').style.display = 'none';
    document.getElementById('pa1').style.display = 'none';
    document.getElementById('pb1').style.display = 'none';
    document.getElementById('pc1').style.display = 'none';
    document.getElementById('pd1').style.display = 'none';
    document.getElementById('pa2').style.display = 'none';
    document.getElementById('pb2').style.display = 'none';
    document.getElementById('pc2').style.display = 'none';
    document.getElementById('pd2').style.display = 'none';
    document.getElementById('da2a').style.display = 'none';
    document.getElementById('da2b').style.display = 'none';
    document.getElementById('da2c').style.display = 'none';
    document.getElementById('da2d').style.display = 'none';
    document.getElementById('da2e').style.display = 'none';
    document.getElementById('da2f').style.display = 'none';
    document.getElementById('da2g').style.display = 'none';
    document.getElementById('da2h').style.display = 'none';">Tea Bags<img src="arrow.png" style="position:relative; left:8px; top:3px;"></font>

这是概念的图片： http://robstest.mydnd.com/helppic.php

第一个帮助的人获得10分布朗尼！ :D

为了说明使用像jQuery这样的库来让你的生活更轻松的好处：

纯JavaScript 

var elementList = ['cat1', 'cat2', 'cat3', 'cat4', 'pa1', ... , 'da2h'];
function showSubMenu(el) {
    for (var i = 0; i < elementList.length; i++) {
        if (elementList[i] != el) {
            document.getElementById(elementList[i]).style.display = 'none';
        }
    }
}

jQuery

var elementList = ['cat1', 'cat2', 'cat3', 'cat4', 'pa1', ... , 'da2h'];
function showSubMenu(el) {
    $.each(elementList, function() {
        if (this != el) {
            $('#' + this).css({display: "none"});
        }
    }
}

本教程也可能有所帮助： http://www.html-5-tutorial.com/

下面是一个指向 JQuery 下拉教程的链接，该教程执行类似于您想要的操作：

http://css-tricks.com/simple-jquery-dropdowns/

。您还可以下载文件并根据需要对其进行修改。

这对

您在制作项目时玩耍和学习将是一个很好的练习。

（另外，您可能想查看下拉列表的其他一些实现以了解最佳实践 - 您模拟的 UI 对于最终用户来说看起来有点混乱）

获取子元素并循环遍历它们，为每个元素设置显示。 将其填充到诸如yourfunction（parentDiv）之类的函数中，并应用于分号后的单击事件。

我会输入这段代码，但现在我没有足够的材料可以使用。

使用 jQuery 做这样的事情：

$(function() {
    $("#l1b").children().each(function() {
        $(this).hide();
    });
});
相关文章：