Question

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

以下是我的代码。单击level-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>

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

Answer 1

我们也能看到您的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 2

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

    });

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

Answer 3

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

带有父链接的Accordion菜单也指一些内容

3 个答案: