看看我这个js能优化吗？
页面结构

<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();

    }

});

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

<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">大