jquery 手风琴菜单 - 链接问题

发布于 2024-10-12 14:30:26 字数 2795 浏览 0 评论 0原文

我正在使用这个 http://www.i-marco.nl/weblog /jquery-accordion-menu/ 手风琴菜单。

问题是,主菜单链接只能用于扩展子菜单,但不能 本身充当链接。我希望主菜单链接转到链接并(我通过 php 脚本设置展开类)展开子菜单。

这是代码:

html(示例):

<span class="acc_menu"> 
<ul class="menu"> 
<li class="expand"> 
<a href="/a_page.html">A page</a> 
<ul class="menu nestedmenu acitem"> 
<li><a href="/other_page.html">Other page</a></li> 
<li><a href="/other_page2.html">Other page 2</a></li> 
<li><a href="/other_page3.html">Other page 3</a></li> 
</ul> 
</li>
</ul>

jquery:

jQuery.fn.initMenu = function() {
return this.each(function(){
    var theMenu = $(this).get(0);
    $('.acitem', this).hide();
    $('li.expand > .acitem', this).show();
    $('li.expand > .acitem', this).prev().addClass('active');
    $('li a', this).click(
        function(e) {
            e.stopImmediatePropagation();
            var theElement = $(this).next();
            var parent = this.parentNode.parentNode;
            if($(parent).hasClass('noaccordion')) {
                if(theElement[0] === undefined) {
                    window.location.href = this.href;
                }
                $(theElement).slideToggle('normal', function() {
                    if ($(this).is(':visible')) {
                        $(this).prev().addClass('active');
                    }
                    else {
                        $(this).prev().removeClass('active');
                    }    
                });
                return false;
            }
            else {
                if(theElement.hasClass('acitem') && theElement.is(':visible')) {
                    if($(parent).hasClass('collapsible')) {
                        $('.acitem:visible', parent).first().slideUp('normal', 
                        function() {
                            $(this).prev().removeClass('active');
                        }
                    );
                    return false;  
                }
                return false;
            }
            if(theElement.hasClass('acitem') && !theElement.is(':visible')) {         
                $('.acitem:visible', parent).first().slideUp('normal', function() {
                    $(this).prev().removeClass('active');
                });
                theElement.slideDown('normal', function() {
                    $(this).prev().addClass('active');
                });
                return false;
            }
        }
    }
);
});
};

$(document).ready(function() {
    $('.menu').initMenu();
}); // enter code here

I'm using this http://www.i-marco.nl/weblog/jquery-accordion-menu/ accordion menu.

Problem is, is that the main-menu links only work to expand the sub-menu, but don't
function as links themselves. I want the main-menu links to go to the link and (i set the expand class via a php script) unfold the sub-menu.

Here's the code:

html (example):

<span class="acc_menu"> 
<ul class="menu"> 
<li class="expand"> 
<a href="/a_page.html">A page</a> 
<ul class="menu nestedmenu acitem"> 
<li><a href="/other_page.html">Other page</a></li> 
<li><a href="/other_page2.html">Other page 2</a></li> 
<li><a href="/other_page3.html">Other page 3</a></li> 
</ul> 
</li>
</ul>

jquery:

jQuery.fn.initMenu = function() {
return this.each(function(){
    var theMenu = $(this).get(0);
    $('.acitem', this).hide();
    $('li.expand > .acitem', this).show();
    $('li.expand > .acitem', this).prev().addClass('active');
    $('li a', this).click(
        function(e) {
            e.stopImmediatePropagation();
            var theElement = $(this).next();
            var parent = this.parentNode.parentNode;
            if($(parent).hasClass('noaccordion')) {
                if(theElement[0] === undefined) {
                    window.location.href = this.href;
                }
                $(theElement).slideToggle('normal', function() {
                    if ($(this).is(':visible')) {
                        $(this).prev().addClass('active');
                    }
                    else {
                        $(this).prev().removeClass('active');
                    }    
                });
                return false;
            }
            else {
                if(theElement.hasClass('acitem') && theElement.is(':visible')) {
                    if($(parent).hasClass('collapsible')) {
                        $('.acitem:visible', parent).first().slideUp('normal', 
                        function() {
                            $(this).prev().removeClass('active');
                        }
                    );
                    return false;  
                }
                return false;
            }
            if(theElement.hasClass('acitem') && !theElement.is(':visible')) {         
                $('.acitem:visible', parent).first().slideUp('normal', function() {
                    $(this).prev().removeClass('active');
                });
                theElement.slideDown('normal', function() {
                    $(this).prev().addClass('active');
                });
                return false;
            }
        }
    }
);
});
};

$(document).ready(function() {
    $('.menu').initMenu();
}); // enter code here

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

述情 2024-10-19 14:30:27

只需将 target="_blank" 添加到您的父链接,然后删除 return false;

Just add target="_blank" to your parent link, and remove the return false;

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文