页脚上的 javascript 驱动的导航菜单

Question

标题上的导航菜单如下所示:

            <ul id="nav">
                <li id="home">
                   <a class="mainmenu" href="#">Link1</a>                    
                </li>

                <li>
                   <a class="mainmenu" href="#">Link2</a>                    
                </li>


            </ul>

相同的标记用于页 footer 分，但它不起作用。 我还有一个名为 jscript.js 的文件，其中包含该网站的所有 javascript， 我发现了这个变量:

 var navTarget = "ul#nav li a" //menu link to target 

此外，如果我删除页眉部分中的标记，页脚将起作用。 我也尝试过使用 .nav 而不是 #nav，我也遇到了同样的问题。

导航菜单是由javascript控制的，我不在这里发布代码，因为它太大了，为了更好地理解导航菜单是如何工作的，看here

我在 JavaScript 中找到了这个:

//设置菜单项ID

 $(navTarget).each(function(i){
    i++                     
    this.id = this.id +"_" +i ;
 });

//菜单点击功能

 $(navTarget).click(function() {

    //ensure link isnt clickable when active
    if ($(this).hasClass('active')) return false;

    //get id of clicked item
    activeNavItem = $(this).attr('id');

    //call the page switch function
    switchContent();



});

//内容切换功能

 var switchContent = function (){


        //set previous and next link & page ids
        var PrevLink = $(navTarget+'.active')
        $(PrevLink).removeClass('active');
        var PrevId = $(PrevLink).attr('id');
        //alert(PrevId)

        var NextLink = $('#'+activeNavItem).addClass('active');
        var NextId = activeNavItem
        //alert(NextId);

Answer 1

从表面上看，JS 代码使用了一些 CSS 选择器(如 jquery 的 $ 或 dojo 的 dojo.query)，它根据 navTarget 的值拉入 DOM 元素目标，然后用它做一些事情:把它变成一个菜单。

但它只执行一次。

你需要看一下JS，看看哪里使用了navTarget。然后，让它在 $(navTarget) 的所有结果上创建菜单应该相当容易，而不仅仅是第一次点击。

此外，您的 dom 中应该只有一个 ID 实例。

您可以将其更改为类:

var navTarget = "ul.nav li a"

在标记中:

<div class='nav'>

但是您仍然需要查看 JS 并确保它针对 CSS 选择器返回的一组目标起作用。该代码可能只期望一个结果并仅使用它:results[0]。