Question

我正忙着在客户端的下拉菜单上工作。我认为我的代码太复杂了。我需要一种解决方案/替代方法来执行给定的目标。

<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

Answer 1

说明使用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/

Answer 2

以下是JQuery下拉教程的链接，该教程可以执行与您想要的类似的操作：

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

...您也可以下载文件并根据需要进行修改。

在您完成项目时，与您一起玩耍和学习将是一个很好的练习。

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

Answer 3

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

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

Answer 4

使用jQuery做这样的事情：

$(function() {
    $("#l1b").children().each(function() {
        $(this).hide();
    });
});

HTML / JS简化

4 个答案: