Question

这应该很简单，但我很难用它。

我有一个简单的折叠菜单，通常使用LI标签内的SPAN标签。

这是JavaScript：

var allSpan = document.getElementsByTagName('SPAN');
for (var i = 0; i < allSpan.length; i++) {
    allSpan[i].onclick = function() {
        if (this.parentNode) {

            var childList = this.parentNode.getElementsByTagName('UL');

            for (var j = 0; j < childList.length; j++) {
                var currentState = childList[j].style.display;
                if (currentState == "none") {
                    childList[j].style.display = "block";
                } else {
                    childList[j].style.display = "none";
                }
            }
        }
    }
}

它可以很好地隐藏和显示嵌套的UL。我想要做的是添加一段代码，这些代码也会更改所点击的父LI项的SPAN。

我认为它会是这样的：

if(currentState=="none") {
    childList[j].style.display="block";
    $(this).css('background-color', 'red');
}
else {
    childList[j].style.display="none";
    $(this).css('background-color', 'blue');
}

我确定我错过了这个显而易见的事实。有人可以指点我正确的方向吗？

更新

抱歉，我完全忘了底部有更多代码：

$(function() {
    $('#menu').find('SPAN').click(function(e) {
        $(this).parent().find('UL').toggle();
    });
});

以下是HTML的正文：

<style TYPE="text/css">
<!--
body { background: white;color: #000000;font-family:geneva; }
a:link { color: #ff8080 }
a:visited { color: #ff0000 }
a:active { color: #a05050 }

ul { margin:0;padding:0; }
li { list-style-type: none; }
ul li span { display:block;min-height:20px;background:blue;color:white;font-weight:bold;padding: 3px 8px 3px 8px;border-top:1px solid black;border-left:1px solid black;border-right:1px solid black;margin:0; }

li ul { display:none; }
li ul li span { background:#98ff33;padding: 3px 8px 3px 8px;color:black;font-weight:normal;display:block; }
li ul li:last-child span { border-bottom:1px solid black; }


-->
</style>


</head>
<body>

<UL id="menu">
<LI class="Category"><SPAN>Solid Tumors</SPAN><UL>

<LI class="subtopic"><SPAN>Anal Cancer</SPAN></LI>

<LI class="subtopic"><SPAN>Biliary Cancer</SPAN></LI>

<LI class="subtopic"><SPAN>Bladder Cancer</SPAN></LI>
</UL>

<LI class="Category"><SPAN>Hematologic Malignancies</SPAN><UL>

<LI class="subtopic"><SPAN>Acute Myeloid Leukemia</SPAN></LI>

<LI class="subtopic"><SPAN>Acute Promyelocytic Leukemia</SPAN></LI>

</UL>

<LI class="Category"><SPAN>Reviewers</SPAN><UL>

<LI class="subtopic"><SPAN>Physician Reviewers</SPAN></LI>

<LI class="subtopic"><SPAN>Pharmacy Reviewers </SPAN></LI>
</UL>
</UL>

Answer 1

下面更改跨度背景颜色或父列表项

http://jsfiddle.net/tuusT/2/

$('#menu').find('SPAN').click(function(e){
    $('#menu').find('.active').removeClass("active");
    $(this).parents(".Category").children("span:first").addClass("active")
    $(this).parent().find('UL').toggle();
});

Answer 2

一个简单的方法是只切换父li元素的类：

$(function () {
    $('#menu SPAN').click(function (e) {
        $(this).parent().toggleClass('open');
    });
});

然后使用CSS添加以管理颜色和添加以下css的显示/隐藏：

#menu li.open > span {
    background-color: red
}
#menu li.open ul {
    display: inline
}

请参阅：http://jsfiddle.net/3TTDJ/

注意：如果您只想在第一个菜单级别执行此操作而不是递归，则需要在选择器中使用直接子选择器'#menu＆gt;指定它。 li> SPAN'：

$(function () {
    $('#menu > li > SPAN').click(function (e) {
        $(this).parent().toggleClass('open');
    });
});

请参阅：http://jsfiddle.net/tleish/3TTDJ/2/

在可折叠菜单中改变父LI的风格

更新

2 个答案: