-1

我在为客户制作下拉菜单时度过了一段地狱般的时光。我认为我的代码太复杂了。我需要一种解决方案/替代方法来执行给定的目标。

<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

4

4 回答 4

2

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

于 2012-04-18T03:58:46.367 回答
1

这是一个 JQuery 下拉教程的链接，该教程的功能类似于您想要的：

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

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

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

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

于 2012-04-18T04:03:37.877 回答
0

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

我会输入这段代码，但现在我没有足够的材料来处理。

于 2012-04-18T03:52:08.023 回答
0

使用 jQuery 来做这样的事情：

$(function() {
    $("#l1b").children().each(function() {
        $(this).hide();
    });
});
于 2012-04-18T04:01:45.907 回答