手风琴菜单与父母的链接也指一些内容

Question

我是jQuery的新手，看起来像我需要你的帮助后，无法从谷歌得到任何东西。我有一个正常的手风琴菜单，包括菜单（level-1）和子菜单（level-2）。在大多数情况下，只有level-2链接指向href链接，level-1与header相似，但在某些情况下，我需要level-1链接来获取一些HTML内容。所以基本上，当你点击父菜单时，它会获取html内容，同时显示子菜单。

以下是我的代码。当我点击1级链接时，在地址栏显示＃号，这是因为在我的代码的第二行中，我将href值指定为＃号。如果我删除了该值，那么它会转到我想要的页面并显示切换的菜单（级别2），但是级别2菜单很快就会消失。任何帮助表示赞赏。提前致谢。

$(document).ready(function() { 


var submenu = $(location).attr('href').substring(url.lastIndexOf('/'), url.length); 

var LinkObj = $('a[href*="' + submenu + '"]').parent(); 
$('.mainmenunav').find(LinkObj).parent().show(); 


    SelLink = $('.mainmenunav').find(LinkObj).parent(); 


      $('.level-1 > li > a').click(function(){ 

       if (SelLink != null && SelLink.html() != $(this).next().html()){ 
        SelLink.slideToggle(800); 
       } 

       $(this).next().slideToggle(400); 

       if (SelLink != null && SelLink.html() == $(this).next().html()){ 
        SelLink = null; 
       }else{ 
        SelLink = $(this).next(); 
       } 
      }); 

    }); 

的HTML视图：

<ul id="mainmenunav"> 
    <li>Sport 
     <ul> 
      <li><a href="#">Football</a></li> 
      <li><a href="#">Tennis</a></li> 
     </ul> 
    </li> 
    <li><a href="#">News</a> 
     <ul> 
      <li><a href="#">Africa</a></li> 
      <li><a href="#">Asia</a></li> 
     </ul> 
    </li> 
</ul> 

当我点击1级链接，在地址栏则显示＃号这是因为，在我的代码的第二行我有HREF值分配为＃号。如果我删除了该值，那么它会转到我想要的页面并显示切换的菜单（级别2），但是级别2菜单很快就会消失。不要理解原因。

Answer 1

问题解决。实际上Liferay本身做了一半的工作;它只是需要一些调整，加上一些jQuery在我的第一篇文章切换和禁用一些链接。

Answer 2

我们可以看到您的HTML标记吗？或者是一个样本？

我原以为你应该能够保持这些链接的href属性，他们仍然会按预期工作（除非你在你的jQuery中调用preventDefault()）。

你可以尝试这样的：

$('.level-1').click(function(){ 

    // Toggle up and down the menu on click 

    if ($(this).attr('href').length > -1) { 
     // The target has a href attribute and it's longer than nothing 
     location.href=$(this).attr('href'); 
    } elseif ($(this).attr('class') != 'active'){ 
     level-2.slideUp('normal'); 
     $(this).next().stop(true,true).slideToggle('normal'); 
     level-1.removeClass('active'); 
     $(this).addClass('active'); 
    } 
}); 

的代码是从我的头顶，所以可能需要进行调整了一点。

所以它将采用href属性并使用它来重定向浏览器。我这样做是因为您使用点击事件来展开手风琴 - 所以我猜测链接的手表没有任何子元素？

“常用”是为子菜单使用鼠标悬停事件，然后点击事件可以是自然的。

---

编辑：从您的意见，我认为这是最好的href和点击“手动”行动检查的页面名称，所以除了上述之外，使用：

$(document).ready(function() { 
    // This code fire once the page has loaded 
    if(location.pathname != "/") 
    { 
     // Should select the link which has the same href as the current page 
     $("a[href*=" + location.pathname + "]").addClass('active'); 

    } 
}); 

你可能需要添加更多的功能到代码中，因为我并不关心这个主题，但是这个概念是，一旦新的页面被加载（记住HTTP没有内存，所以不知道它是什么状态位于最后一页），我们检查页面地址，并将其与href属性相匹配，然后根据需要执行下拉菜单。

Answer 3

@RemarkLima我也做了类似于上面的事情，如下所示。

$(document).ready(function() { 

$('.level-1 > li > a').attr('href','#'); 

var submenu = $(location).attr('href').substring(url.lastIndexOf('/'), url.length); 

var LinkObj = $('a[href*="' + submenu + '"]').parent(); 
$('.mainmenunav').find(LinkObj).parent().show(); 


    SelLink = $('.mainmenunav').find(LinkObj).parent(); 


      $('.level-1 > li > a').click(function(){ 

       if ($(this).attr('href').length > -1) { 
         location.href=$(this).attr('href'); 

       } else if(SelLink != null && SelLink.html() != $(this).next().html()){ 
        SelLink.slideToggle(800); 
       } 

       $(this).next().slideToggle(400); 

       if (SelLink != null && SelLink.html() == $(this).next().html()){ 
        SelLink = null; 
       }else{ 
        SelLink = $(this).next(); 
       } 
      }); 

    }); 

当我点击，因为在我的代码的第二行1级链接，它显示了＃号是地址栏我有指定为＃号href值。如果我删除了该值，那么它会转到我想要的页面并显示切换的菜单（级别2），但是级别2菜单很快就会消失。不要理解原因。