如何禁用 jquery 手风琴的某些链接

Question

我目前在导航部分实现了基于 jquery 的手风琴，但导航的某些部分不需要成为手风琴的一部分（如果没有类别等）我只是想知道是否可以禁用部分导航手风琴与否？

我感觉这可能是不可能的，但这个网站之前曾让我感到惊讶:)

非常感谢。

Answer 1

由于事件的绑定顺序，上一个技巧不起作用，但以下技巧有效：

// Add the class ui-state-disabled to the headers that you want disabled
$( ".whatyouwant" ).addClass("ui-state-disabled");

// Now the hack to implement the disabling functionality
var accordion = $( "#accordion" ).data("accordion");

accordion._std_clickHandler = accordion._clickHandler;

accordion._clickHandler = function( event, target ) {
    var clicked = $( event.currentTarget || target );
    if (! clicked.hasClass("ui-state-disabled")) {
        this._std_clickHandler(event, target);
    }
};

每当您想要激活选项卡时，请执行以下操作：

// Remove the class ui-state-disabled to the headers that you want to enable
$( ".whatyouwant" ).removeClass("ui-state-disabled");

就是这样

Answer 2

一种简单的方法可能是使用 unbind 方法：

$(".ui-state-disabled").unbind("click");

在要禁用的元素中添加 ui-state-disabled。

Answer 3

您可以对要禁用的事物进行分类。

然后做：

jQuery(".toDisable").live("click", function (){return false;});

或类似的事情

Answer 4

喜欢主页链接吗？我想要一个在我的手风琴顶部“常规”样式的主页链接。我正在使用 Google 的 1.8 UI 版本：

< script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">< / script >

未缩小：

< script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js">< / script >

我在手风琴的 _clickHandler 方法（第 5834 行左右）中对手风琴进行了一些修改。我在“var clicked =”之后添加了以下代码：

// this.headers.index == My First "Home" Accordion H3.

if(this.headers.index(event.currentTarget) == 0){window.location='/support';return;}

Answer 5

我将选项 linkDisabled 添加到插件中。通过这种方式，您可以为手风琴对象内的链接定义一个类，这些链接被禁用。例如：

$(myAccordion).accordion({
    linkDisabled: 'disabled' // note that the class is given without dot. e.g. not '.disabled', but 'disabled'
});

这是重写的插件：

/* ---------------------------------------------
Nested Accordion v.1.4.7.3
Script to create 'accordion' functionality on a hierarchically structured content.
http://www.adipalaz.com/experiments/jquery/nested_accordion.html
Requires: jQuery v1.4.2+
Copyright (c) 2009 Adriana Palazova
Dual licensed under the MIT (http://www.adipalaz.com/docs/mit-license.txt) and GPL (http://www.adipalaz.com/docs/gpl-license.txt) licenses.
------------------------------------------------ */
(function($) {
//$.fn.orphans - http://www.mail-archive.com/[email protected]/msg43851.html
$.fn.orphans = function(){
var txt = [];
this.each(function(){$.each(this.childNodes, function() {
  if (this.nodeType == 3 && $.trim(this.nodeValue)) txt.push(this)})}); return $(txt);};

$.fn.accordion = function(options) {
    var o = $.extend({}, $.fn.accordion.defaults, options);

    return this.each(function() {
      var containerID = o.container ? '#' + this.id : '', objID = o.objID ? o.objID : o.obj + o.objClass,
        Obj = o.container ? containerID + ' ' + objID : '#' + this.id,
        El = Obj + ' ' + o.el,
        hTimeout = null; 

      // build
      if (o.head) $(Obj).find(o.head).addClass('h');
      if (o.head) {
        if ($(El).next('div:not(.outer)').length) {$(El).next('div:not(.outer)').wrap('<div class="outer" />');} 
        $(Obj + ' .h').each(function(){
            var $this = $(this);
            if (o.wrapper == 'div' && !$this.parent('div.new').length) {$this.add( $this.next('div.outer') ).wrapAll('<div class="new"></div>');}
        }); 
      }
      $(El).each(function(){
          var $node = $(this);
          if ($node.find(o.next).length || $node.next(o.next).length) {
            if ($node.find('> a').length) {
                $node.find('> a').addClass("trigger");
            } else {
                var anchor = '<a class="trigger" href="#" />'
                if (o.elToWrap) {
                  var $t = $node.orphans(), $s = $node.find(o.elToWrap);
                  $t.add($s).wrapAll(anchor);
                } else {
                  $node.orphans().wrap(anchor);
                }
            }
          } else {
            $node.addClass('last-child');
            if (o.lastChild && $node.find('> a').length) {$node.find('> a').addClass("trigger");}
          }
      });
      // init state
      $(El + ' a.trigger').closest(o.wrapper).find('> ' + o.next).not('.shownd').hide().closest(o.wrapper).find('a.open').removeClass('open').data('state', 0);
      if (o.activeLink) {
          var loc,
              fullURL = window.location.href,
              path = window.location.pathname.split( '/' ),
              page = path[path.length-1];
              (o.uri == 'full') ? loc = fullURL : loc = page;
          $(Obj + ' a:not([href $= "#"])[href$="' + loc + '"]').addClass('active').parent().attr('id', 'current').closest(o.obj).addClass('current');
          if (o.shift && $(Obj + ' a.active').closest(o.wrapper).prev(o.wrapper).length) {
            var $currentWrap = $(Obj + ' a.active').closest(o.wrapper),
                $curentStack = $currentWrap.nextAll().andSelf(),
                $siblings = $currentWrap.siblings(o.wrapper),
                $first = $siblings.filter(":first");
            if (o.shift == 'clicked' || (o.shift == 'all' && $siblings.length)) {
                $currentWrap.insertBefore($first).addClass('shownd').siblings(o.wrapper).removeClass('shownd');
            }
            if (o.shift == 'all' && $siblings.length > 1) {$curentStack.insertBefore($first);}
          }
      }
      if (o.initShow) {
        $(Obj).find(o.initShow).show().addClass('shownd')
          .parents(Obj + ' ' + o.next).show().addClass('shownd').end()
          .parents(o.wrapper).find('> a.trigger, > ' + o.el + ' a.trigger').addClass('open').data('state', 1);
          if (o.expandSub) {$(Obj + ' ' + o.initShow).children(o.next).show().end().find('> a').addClass('open').data('state', 1 );}
      }
      // event
      if (o.event == 'click') {
          var ev = 'click';
      } else  {
          if (o.focus) {var f = ' focus';} else {var f = '';}
          var ev = 'mouseenter' + f;
      }
      var scrollElem;
      (typeof scrollableElement == 'function') ? (scrollElem = scrollableElement('html', 'body')) : (scrollElem = 'html, body');

      // The event handler is bound to the "accordion" element
      // The event is filtered to only fire when an <a class="trigger"> was clicked on.
      $(Obj).delegate('a.trigger', ev, function(ev) {
          var $thislink = $(this),
              $thisLinkParent = $(this).parent(),
              $thisWrapper = $thislink.closest(o.wrapper),
              $nextEl = $thisWrapper.find('> ' + o.next),
              $siblings = $thisWrapper.siblings(o.wrapper),
              $trigger = $(El + ' a.trigger'),
              $shownEl = $thisWrapper.siblings(o.wrapper).find('>' + o.next + ':visible'),
              shownElOffset;
              $shownEl.length ? shownElOffset = $shownEl.offset().top : shownElOffset = false;

          function action(obj) {
             if (($nextEl).length && $thislink.data('state') && (o.collapsible)) {
                  $thislink.removeClass('open');
                  $nextEl.filter(':visible')[o.hideMethod](o.hideSpeed, function() {$thislink.data('state', 0);});
              }
              if (($nextEl.length && !$thislink.data('state')) || (!($nextEl).length && $thislink.closest(o.wrapper).not('.shownd'))) {
                  if (!o.standardExpansible) {
                    $siblings.find('> a.open, >'+ o.el + ' a.open').removeClass('open').data('state', 0).end()
                    .find('> ' + o.next + ':visible')[o.hideMethod](o.hideSpeed);
                    if (shownElOffset && shownElOffset < $(window).scrollTop()) {$(scrollElem).animate({scrollTop: shownElOffset}, o.scrollSpeed);}
                  }
                  $thislink.addClass('open');
                  $nextEl.filter(':hidden')[o.showMethod](o.showSpeed, function() {$thislink.data('state', 1);});
              }
              if (o.shift && $thisWrapper.prev(o.wrapper).length) {
                var $thisStack = $thisWrapper.nextAll().andSelf(),
                    $first = $siblings.filter(":first");
                if (o.shift == 'clicked' || (o.shift == 'all' && $siblings.length)) {
                  $thisWrapper.insertBefore($first).addClass('shownd').siblings(o.wrapper).removeClass('shownd');
                }
                if (o.shift == 'all' && $siblings.length > 1) {$thisStack.insertBefore($first);}
              }
          }
          if (o.event == 'click') {
              if (!o.linkDisabled || !$thislink.hasClass(o.linkDisabled)) {
                  action($trigger); 
              }
              if ($thislink.is('[href $= "#"]')) {
                  return false;
              } else {
                  if ($.isFunction(o.retFunc)) {
                    return o.retFunc($thislink) 
                  } else {
                    return true;
                  }
              }
          }
          if (o.event != 'click') {
              hTimeout = window.setTimeout(function() {
                  if (!o.linkDisabled || !$thislink.hasClass(o.linkDisabled)) {
                      action($trigger); 
                  }
              }, o.interval);        
              $thislink.click(function() {
                  $thislink.blur();
                  if ($thislink.attr('href')== '#') {
                      $thislink.blur();
                      return false;
                  }
              });
          }
      });
      if (o.event != 'click') {$(Obj).delegate('a.trigger', 'mouseleave', function() {window.clearTimeout(hTimeout); });}

      /* -----------------------------------------------
      // http://www.learningjquery.com/2007/10/improved-animated-scrolling-script-for-same-page-links:
      -------------------------------------------------- */
      function scrollableElement(els) {
        for (var i = 0, argLength = arguments.length; i < argLength; i++) {
          var el = arguments[i],
              $scrollElement = $(el);
          if ($scrollElement.scrollTop() > 0) {
            return el;
          } else {
            $scrollElement.scrollTop(1);
            var isScrollable = $scrollElement.scrollTop() > 0;
            $scrollElement.scrollTop(0);
            if (isScrollable) {
              return el;
            }
          }
        };
        return [];
      }; 
      /* ----------------------------------------------- */
});};
$.fn.accordion.defaults = {
  container : true, // {true} if the plugin is called on the closest named container, {false} if the pligin is called on the accordion element
  obj : 'ul', // the element which contains the accordion - 'ul', 'ol', 'div' 
  objClass : '.accordion', // the class name of the accordion - required if you call the accordion on the container
  objID : '', // the ID of the accordion (optional)
  wrapper :'li', // the common parent of 'a.trigger' and 'o.next' - 'li', 'div'
  el : 'li', // the parent of 'a.trigger' - 'li', '.h'
  head : '', // the headings that are parents of 'a.trigger' (if any)
  next : 'ul', // the collapsible element - 'ul', 'ol', 'div'
  initShow : '', // the initially expanded section (optional)
  expandSub : true, // {true} forces the sub-content under the 'current' item to be expanded on page load
  showMethod : 'slideDown', // 'slideDown', 'show', 'fadeIn', or custom
  hideMethod : 'slideUp', // 'slideUp', 'hide', 'fadeOut', or custom
  showSpeed : 400,
  hideSpeed : 800,
  scrollSpeed : 600, //speed of repositioning the newly opened section when it is pushed off screen.
  activeLink : true, //{true} if the accordion is used for site navigation
  event : 'click', //'click', 'hover'
  focus : true, // it is needed for  keyboard accessibility when we use {event:'hover'}
  interval : 400, // time-interval for delayed actions used to prevent the accidental activation of animations when we use {event:hover} (in milliseconds)
  collapsible : true, // {true} - makes the accordion fully collapsible, {false} - forces one section to be open at any time
  standardExpansible : false, //if {true}, the functonality will be standard Expand/Collapse without 'accordion' effect
  lastChild : true, //if {true}, the items without sub-elements will also trigger the 'accordion' animation
  shift: false, // false, 'clicked', 'all'. If 'clicked', the clicked item will be moved to the first position inside its level, 
                // If 'all', the clicked item and all following siblings will be moved to the top
  elToWrap: null, // null, or the element, besides the text node, to be wrapped by the trigger, e.g. 'span:first'
  uri : 'full', // 
  retFunc: null, //
  linkDisabled: '' // add disabled class to link to not don't add event
};
/* ---------------------------------------------
Feel free to remove the following code if you don't need these custom animations.
------------------------------------------------ */
//credit: http://jquery.malsup.com/fadetest.html
$.fn.slideFadeDown = function(speed, callback) { 
  return this.animate({opacity: 'show', height: 'show'}, speed, function() { 
    if (jQuery.browser.msie) { this.style.removeAttribute('filter'); }
    if (jQuery.isFunction(callback)) { callback(); }
  }); 
}; 
$.fn.slideFadeUp = function(speed, callback) { 
  return this.animate({opacity: 'hide', height: 'hide'}, speed, function() { 
    if (jQuery.browser.msie) { this.style.removeAttribute('filter'); }
    if (jQuery.isFunction(callback)) { callback(); }
  }); 
}; 
/* --- end of the optional code --- */
})(jQuery);
///////////////////////////
// The plugin can be called on the ID of the accordion element or on the ID of its closest named container.
// If the plugin is called on a named container, we can initialize all the accordions residing in a given section with just one call.
// EXAMPLES:
/* ---
$(function() {
// If the closest named container = #container1 or the accordion element is <ul id="subnavigation">:
/// Standard nested lists:
  $('#container1').accordion(); // we are calling the plugin on the closest named container
  $('#subnavigation').accordion({container:false}); // we are calling the plugin on the accordion element
  // this will expand the sub-list with "id=current", when the accordion is initialized:
  $('#subnavigation').accordion({container:false, initShow : "#current"});
  // this will expand/collapse the sub-list when the mouse hovers over the trigger element:
  $('#container1').accordion({event : "hover", initShow : "#current"});

// If the closest named container = #container2
/// Nested Lists + Headings + DIVs:
  $('#container2').accordion({el: '.h', head: 'h4, h5', next: 'div'});
  $('#container2').accordion({el: '.h', head: 'h4, h5', next: 'div', initShow : 'div.outer:eq(0)'});

/// Nested DIVs + Headings:
  $('#container2').accordion({obj: 'div', wrapper: 'div', el: '.h', head: 'h4, h5', next: 'div.outer'});
  $('#container2').accordion({objID: '#acc2', obj: 'div', wrapper: 'div', el: '.h', head: 'h4, h5', next: 'div.outer', initShow : '.shownd', shift: 'all'});
});

/// We can globally replace the defaults, for example:
  $.fn.accordion.defaults.initShow = "#current";
--- */
/// Example options for Hover Accordion:
/* ---
$.fn.accordion.defaults.container=false;
$.fn.accordion.defaults.event="hover";
$.fn.accordion.defaults.focus=false; // Optional. If it is possible, use {focus: true}, since {focus: false} will break the keyboard accessibility
$.fn.accordion.defaults.initShow="#current";
$.fn.accordion.defaults.lastChild=false;
--- */

Answer 6

我有类似的问题。我需要一个 5 部分的手风琴，但在前三部分（提示不同的操作）完成之前，后两部分无法访问。以下是我处理它的方法（使用 2 个单独的手风琴）：

HTML：

    <div id="accordion_1">
        <h3 id="title1"><a href="#">Content for Title 1</a></h3>
        <div>Content for Section 1</div>
        <h3 id="title2"><a href="#">Content for Title 2</a></h3>
        <div>Content for Section 2</div>
        <h3 id="title3"><a href="#">Content for Title 3</a></h3>
        <div>Content for Section 3</div>
    </div>
    <div id="accordion_2" class="faded_out">
        <h3><a href="#">Content for Title 4</a></h3>
        <div>Content for Section 4</div>
        <h3><a href="#">Content for Title 5</a></h3>
        <div>Content for Section 5</div>
    </div>

Javascript：

    $(document).ready(function(){
        $('#accordion_1').accordion({
            active:false,
            collapsible:true
        });
        $('#accordion_1').click(function(){
            $(this).siblings().accordion('activate',false);
        });

        $('#accordion_2').accordion({
            active:false,
            disabled:true,
            collapsible:true,
        });
        $('#accordion_2').click(function(){
            $(this).siblings().accordion('activate',false);
        });

        function ReleaseAccordion2(){
            if($('h3#title1').hasClass('complete') && $('h3#title2').hasClass('complete') && $('h3#title3').hasClass('complete')){
                $('#accordion_2').accordion('enable');
                $('#accordion_2').removeClass('faded_out');
            }
        }
        ReleaseAccordion2();
    }

这样，我们设置了第二个手风琴，以便它开始时处于禁用状态。此外，它还被赋予了 CSS 类“faded_out”，它提供了一些不透明度并将鼠标光标设置为默认的锚点。最后，当单击任一手风琴时，它会将另一个手风琴的“激活”设置为 false，以便关闭另一个手风琴并使其看起来像是同一个手风琴的一部分。这对我来说非常有效。

PS 我的应用程序位于轨道上，为了检测是否应启用第二个手风琴（通过 ReleaseAccordion2 函数），我查找传递给第一个手风琴中的 h3 的类（“完整”）（通过嵌入式 ruby ）。

Answer 7

您可以为此使用“beforeActivate”事件。

向 h3 元素添加禁用类

<h3 class="accordionDisable disabledItemOne" >Title</h3>

将以下函数设置为“beforeActivate”事件。可以通过“ui.newHeader”对象访问标头对象。测试标头是否具有“accordionDisable”类，如果为 true，则返回 false，它将阻止手风琴部分激活。

$( "#your_accordion" ).accordion({ 

beforeActivate :  function(  event, ui  ){

    if( ui.newHeader.hasClass( 'accordionDisable' ) ){

        return false;

    }
} 
});

要激活手风琴部分，请删除 'accordionDisable' 类

$( '.disabledItemOne' ).removeClass( 'accordianDisable' );

Answer 8

对要包含的部分使用类，并在初始化手风琴时创建更具体的 CSS 选择器。

Answer 9

Marcgg 的答案似乎是正确的。您可以做的是将类添加到您想要在手风琴中启用的链接，从中获取 href，然后通过设置 window.location 来导航 url。

 $("a.enlnk").live("click", function() {
    var navigateToLink = $.trim(this.href);
    if (navigateToLink) {
        window.location.href = navigateToLink;
    }
});

Answer 10

我有同样的问题。我想加入一个不属于手风琴一部分的 div。它是一个 div，而手风琴中的其他元素是 。我添加了 header: '' 选项，这阻止了类被添加到我拥有的 div 中。

Answer 11

我似乎无法获得与我正在使用 ATM（版本 1.8）的 jQuery UI 版本一起使用的解决方案，

我确实找到了另一个解决方案；

$(".toDisable").each(function(){
    $(this)
        .addClass("ui-state-disabled")
        .unbind("click");
});

Answer 12

$('.disabled').addClass('ui-state-disabled').on('click', function () {
   return false;
});

<h3 class="disabled">Payment Information </h3>