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

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

我觉得这可能是不可能的,但这个网站让我感到惊讶:)

非常感谢。

您可以将类放在要禁用的内容上。

然后做 :

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

或类似的东西

由于事件的绑定顺序,以前的技巧不起作用,但以下工作:

 // 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"); 

而已

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

  $( “UI状态禁用。 ”)解除绑定(“ 点击”)。 

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

喜欢家庭链接? 我想在我的手风琴顶部“定期”设置一个家庭链接。 我正在使用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-ish行)中对手风琴进行了一些攻击。 我在“var clicked =”之后添加了以下代码:

 // this.headers.index == My First "Home" Accordion H3. if(this.headers.index(event.currentTarget) == 0){window.location='/support';return;} 

我将选项linkDisabled添加到插件中。 这样,您就可以为accordion对象内部的链接定义一个类,这些类被禁用。 例如:

 $(myAccordion).accordion({ linkDisabled: 'disabled' // note that the class is given without dot. eg 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/jquery-en@googlegroups.com/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('
');} $(Obj + ' .h').each(function(){ var $this = $(this); if (o.wrapper == 'div' && !$this.parent('div.new').length) {$this.add( $this.next('div.outer') ).wrapAll('
');} }); } $(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 = '' 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 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, eg '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

我有类似的问题。 我需要一个5部分的手风琴,但最后两个部分直到前三个(促使不同的动作)完成才能进入。 这是我处理它的方式(使用2个独立的手风琴):

HTML:

  

Content for Title 1

Content for Section 1

Content for Title 2

Content for Section 2

Content for Title 3

Content for Section 3

Content for Title 4

Content for Section 4

Content for Title 5

Content for Section 5

使用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’,它给出了一些不透明度,并将鼠标光标设置为锚点的默认值。 最后,当点击任何一个手风琴时,它会在另一个上设置’activate’为假,以便关闭另一个手风琴并使它看起来像是同一个手风琴的一部分。 这对我来说非常有效。

PS我的应用程序在轨道上,并且为了检测是否应该启用第二个手风琴(通过ReleaseAccordion2function),我寻找在第一个手风琴中传递给h3的类(’完成’)(通过嵌入式ruby) )。

您可以使用’beforeActivate’事件。

为h3元素添加禁用类

 

Title

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

 $( "#your_accordion" ).accordion({ beforeActivate : function( event, ui ){ if( ui.newHeader.hasClass( 'accordionDisable' ) ){ return false; } } }); 

要激活手风琴部分,请删除’accordionDisable’类

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

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

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

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

我遇到过同样的问题。 我想坚持不属于手风琴的div。 它是一个div而手风琴中的其他元素是。 我添加了标题:”选项,这阻止了类被添加到我拥有的div中。

我似乎无法获得使用jQuery UI版本的解决方案我正在使用ATM(版本1.8)

我找到了另一个解决方案;

 $(".toDisable").each(function(){ $(this) .addClass("ui-state-disabled") .unbind("click"); }); 
 $('.disabled').addClass('ui-state-disabled').on('click', function () { return false; }); 
 

Payment Information