Question

我正在开发一个项目，我有一个带有6个链接的水平导航栏，其中3个是同一水平栏中子导航的一部分。链接用图标表示。我正在寻找在点击其中一个主导航图标时动态更改子导航的最简单方法。

[ Home - Search ]{ home1 - home2 - home3 }[ Add ]

选择搜索后，它将变为：

[ Home - Search ]{ search1 - search2 - search3 }[ Add ]

这是当前栏的HTML。尚未生成替换图标的链接，因为它目前已破坏结构。

<nav id="navBar">
    <ul>
        <div id="mainNav">
            <li><a id="activeLink" class="homeLink" href="#">Home<a/></li>
            <li><a class="searchLink" href=#>Search<a/></li>
        </div>
        <div id="subNav">
            <li><a class="feedLink" href=#>Feed<a/></li>            
            <li><a class="messagesLink" href=#>Messages<a/></li>
            <li><a class="connectionsLink" href=#>Connections<a/></li>
        </div>
        <div id="mainNav">
            <li><a class="addLink" href=#>Add<a/></li>
        </div>
    </ul>
</nav>
<nav id="searchBar"></nav>

非常感谢对此的任何帮助

Answer 1

此代码根据传递到responder的标题修改每个链接的新类和新文本：

var responder = function(components) {
    return function() {
        $.each($("#subNav a"), function(index, element) {
            $(element).text(components[index]);
            $(element).attr("class", components[index]+"Link");
        });
    }
};
$(".homeLink").click(responder(["home1", "home2", "home3"]))
$(".searchLink").click(responder(["search1", "search2", "search3"]))

添加更多选项就像将responder([titles...])附加到click事件一样简单;

Answer 2

我不知道你需要真正聪明一点。只需将它们放在一起并切换.hidden类：

<强> CSS

.hidden {
    display: none;
}

<强> HTML

<nav id="navBar">
    <ul>
        <li id="mainNav">
            <ul>
                <li><a id="activeLink" class="homeLink" href="#">Home</a></li>
                <li><a class="searchLink" href="#">Search</a></li>
            </ul>
        </li>
        <li id="subNav">
            <ul>
                <li><a class="feedLink" href="#">Feed</a></li>            
                <li><a class="messagesLink" href="#">Messages</a></li>
                <li><a class="connectionsLink" href="#">Connections</a></li>
            </ul>
        </li>
        <li id="searchNav" class="hidden">
            <ul>
                <li><a href="#">Search 1</a></li>            
                <li><a href="#">Search 2</a></li>
                <li><a href="#">Search 3</a></li>
            </ul>
        </li>
        <li id="mainNav">
            <ul>
                <li><a class="addLink" href="#">Add</a></li>
            </ul>
        </li>
    </ul>
</nav>

<强>的jQuery

$(document).ready(function(){
    var $subnavs = $('#subNav, #searchNav'),
        $search = $('#mainNav .searchLink');

    $search.click(function(){
        $subnavs.toggleClass('hidden');

        return false;
    });
});

http://jsfiddle.net/userdude/eJm2z/1

请注意，可怕的丑陋菜单样式仅供演示......

动态导航链接

2 个答案: