看看我这个js能优化吗？
本帖最后由 yaganblw 于 2013-01-14 14:37:08 编辑 页面结构

<dl id="food">
    <dt>蔬菜</dt>
    <dd><a href="radish.html">萝卜</a></dd>
    <dd><a href="cabbage.html">大白菜</a></dd>
    <dt>水果</dt>
    <dd><a href="apple.html">苹果</a></dd>
    <dd><a href="banana.html">香蕉</a></dd>
    <dd><a href="orange.html"></a>橘子</dd>
    <dt>肉类</dt>
    <dd><a href="pork.html">猪肉</a></dd>
    <dd><a href="beef.html">牛肉</a></dd>
<dl>

需求：这是一个多级分类导航，点击某个子分类比如“苹果”时，我希望处于这个分类（水果）的栏目是打开的，而其它是隐藏的。参考CSDN论坛左侧的菜单导航。
然后我是这样做的

$(function () {
    var nav = $("#food > dt");
    nav.nextUntil("dt").hide();
    var url = location.href.substr(location.href.lastIndexOf("/") + 1);  //获取当前页url尾部
    url = url.replace("#", "");  //删除url中的锚点
    if (url != "") {
        $("#food dd a[href='" + url + "']").parents("dd").prevAll("dt").eq(0).nextUntil("dt").show();
    }
});

功能可以实现，但是效率是不是很差？不知道我说清楚了没有？ javascript 优化 html
[解决办法]
感觉这个结构操作起来不是很灵活,参考一下这个：

<div id="food">
    <h1>蔬菜</h1>
    <div class="sub">
        <a href="radish.html">萝卜</a>
        <a href="radish.html">萝卜</a>
        <a href="radish.html">萝卜</a>
    </div>
    <h1>蔬菜</h1>
    <div class="sub">
        <a href="radish.html">萝卜</a>
        <a href="radish.html">萝卜</a>
        <a href="radish.html">萝卜</a>
    </div>
    <h1>蔬菜</h1>
    <div class="sub">
        <a href="radish.html">萝卜</a>
        <a href="radish.html">萝卜</a>
        <a href="radish.html">萝卜</a>
    </div>
</div>

[解决办法]
用正则替换，效率应该是没问题的

 <dl id="food">
    <dt>蔬菜</dt>
    <dd><a href="radish.html">萝卜</a></dd>
    <dd><a href="cabbage.html">大白菜</a></dd>
    <dt>水果</dt> 
 
    <dd><a href="apple.html">苹果</a></dd>
    <dd><a href="banana.html">香蕉</a></dd>
    <dd><a href="orange.html"></a>橘子</dd>
    <dt>肉类</dt>
    <dd><a href="pork.html">猪肉</a></dd>
    <dd><a href="beef.html">牛肉</a></dd>
</dl>
 
<script>
  
  $(function () {
    $("#food > dd").hide();
    var url=location.href.match(/(\w+\.\w+)([?#].+)?$/)[1] ;
    var html=$("#food").html().split(/(?=<dt>)/i);
    va htmls=$.map(html,function(v,i){
        return v.indexOf(url)!=-1? v.replace(/<dd[^>]+>/ig,'<dd style="display:block">'):v;
    });
    $("#food").html( htmls.join('') );
 
});
</script>

[解决办法]
html结构没问题
初始化隐藏dd，可以用css来做
#food dd { display:none; }