jquery Accordion 菜单，制作标题超链接

Question

我有一个 jquery 菜单，当前当您单击标题时它会打开子菜单。

是否可以让按钮仅在文本可点击时展开菜单？

作为替代我尝试删除行'$(this).removeAttr('href');'并添加了“document.location.href = $(this).attr("href");”这使得超链接有效，但您无法最小化菜单。

Here is the js fiddle

我想让 google 导航到 google，但右边的框仍然展开和最小化。

$(document).ready(function () {

     var url = window.location.href; 

     $('#cssmenu a').each(function() {

        if(url == (this.href)) { 
            $(this).parents('li').addClass('active');
            $(this).closest('li').addClass('active');       
        }
    });

 });

 (function($){
 $(document).ready(function(){

 $('#cssmenu li.active').addClass('open').children('ul').show();

 $('#cssmenu li.has-sub>a').on('click', function(){
 $(this).removeAttr('href');
    document.location.href = $(this).attr("href");

    var element = $(this).parent('li');
    if (element.hasClass('open')) {
        element.removeClass('open');
        element.find('li').removeClass('open');
        element.find('ul').slideUp(200);
    }
    else {
        element.addClass('open');
        element.children('ul').slideDown(200);
        element.siblings('li').children('ul').slideUp(200);
        element.siblings('li').removeClass('open');
        element.siblings('li').find('li').removeClass('open');
        element.siblings('li').find('ul').slideUp(200);
    }


});

$('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');

(function getColor() {
    var r, g, b;
    var textColor = $('#cssmenu').css('color');
    textColor = textColor.slice(4);
    r = textColor.slice(0, textColor.indexOf(','));
    textColor = textColor.slice(textColor.indexOf(' ') + 1);
    g = textColor.slice(0, textColor.indexOf(','));
    textColor = textColor.slice(textColor.indexOf(' ') + 1);
    b = textColor.slice(0, textColor.indexOf(')'));
    var l = rgbToHsl(r, g, b);
    if (l > 0.7) {
        $('#cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
        $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
    }
    else
    {
        $('#cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
        $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
    }
})();

$('#cssmenu').accordion({ 可折叠:真，

beforeActivate: function(event, ui) {
     // The accordion believes a panel is being opened
    if (ui.newHeader[0]) {
        var currHeader  = ui.newHeader;
        var currContent = currHeader.next('.ui-accordion-content');
     // The accordion believes a panel is being closed
    } else {
        var currHeader  = ui.oldHeader;
        var currContent = currHeader.next('.ui-accordion-content');
    }
     // Since we've changed the default behavior, this detects the actual status
    var isPanelSelected = currHeader.attr('aria-selected') == 'true';

     // Toggle the panel's header
    currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));

    // Toggle the panel's icon
    currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);

     // Toggle the panel's content
    currContent.toggleClass('accordion-content-active',!isPanelSelected)    
    if (isPanelSelected) { currContent.slideUp(); }  else { currContent.slideDown(); }

    return false; // Cancel the default action
}

});

Answer 1

$('#cssmenu li.has-sub>a').on('click', function(e){   

// see if you're clicking the span
    if(e.target.nodeName === 'SPAN') {

        // prevent going to url
        e.preventDefault();
         var element = $(this).parent('li');
        if (element.hasClass('open')) {
            element.removeClass('open');
            element.find('li').removeClass('open');
            element.find('ul').slideUp(200);
        }
        else {
            element.addClass('open');
            element.children('ul').slideDown(200);
            element.siblings('li').children('ul').slideUp(200);
            element.siblings('li').removeClass('open');
            element.siblings('li').find('li').removeClass('open');
            element.siblings('li').find('ul').slideUp(200);
        }
    } else {
        // you're clicking the a tag, go with it
        return true;
    }

    });

这是 JSFiddle , 但也要修复 css, span 不一定是, display: block