làm thế nào để vô hiệu hóa một số liên kết của jquery accordion

Question

Tôi hiện đang thực hiện một accordion dựa trên jquery trên một phần chuyển hướng, nhưng một số phần của chuyển hướng không cần phải là một phần của accordion (nếu không có loại vv) chỉ cần tự hỏi nếu nó có thể vô hiệu hóa các phần của accordion hay không?

tôi có cảm giác điều này là không thể nhưng trang web này đã làm tôi ngạc nhiên trước :)

Cảm ơn rất nhiều.

Answer 1

Bạn có thể đặt các lớp học về những điều bạn muốn tắt.

Sau đó làm:

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

hoặc một cái gì đó tương tự

Answer 2

Sử dụng các lớp cho phần bạn muốn bao gồm và tạo bộ chọn CSS cụ thể hơn khi khởi tạo accordion.

Answer 3

lừa trước không hoạt động vì sự tự ràng buộc của các sự kiện, nhưng các công việc sau:

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

Bất cứ khi nào bạn muốn kích hoạt tab, làm:

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

Đó là số

Answer 4

Giống như một liên kết gia đình? Tôi muốn một liên kết nhà theo kiểu "thường xuyên" ở đầu accordion của tôi. Tôi đang sử dụng phiên bản 1.8 UI của Google:

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

Un-minified:

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

tôi bị hack accordion một chút trong phương pháp _clickHandler của nó (dòng 5834-ish). Tôi đã thêm mã sau ngay sau "var clicks =": ​​

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

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

Answer 5

Câu trả lời của Marcgg dường như đang đi đúng hướng. Những gì bạn có thể làm là thêm lớp vào các liên kết bạn muốn kích hoạt trong accordion, lấy href từ họ và sau đó điều hướng url bằng cách thiết lập window.location.

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

Answer 6

Tôi gặp vấn đề tương tự. Tôi muốn dính vào một div không phải là một phần của accordion. Đó là một div trong khi các yếu tố khác trong accordion là. Tôi đã thêm tùy chọn tiêu đề: '' và điều này ngăn không cho các lớp được thêm vào div mà tôi có.

Answer 7

tôi đã thêm liên kết tùy chọnĐược bật cho plugin. bằng cách này bạn có thể định nghĩa một lớp cho các liên kết bên trong đối tượng accordion, nó bị vô hiệu hóa. ví dụ .:

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

và đây là plugin được viết lại:

/* --------------------------------------------- 
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('<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 8

tôi dường như không thể để có được những giải pháp cho những công việc với các phiên bản của jQuery UI Tôi đang sử dụng máy ATM (Phiên bản 1.8)

Tôi đã tìm được giải pháp khác;

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

Answer 9

Tôi gặp sự cố tương tự. Tôi cần một accordion 5 phần, nhưng hai phần cuối cùng không thể truy cập được cho đến khi ba phần đầu tiên (được nhắc nhở cho các hành động khác nhau) đã được hoàn thành. Đây là cách tôi xử lý nó (sử dụng 2 accordions riêng):

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

Bằng cách này, chúng tôi thiết lập accordion thứ hai để nó bắt đầu ra khuyết tật. Hơn nữa, nó được cấp cho lớp 'faded_out' của CSS, cung cấp một số độ mờ và đặt con trỏ chuột thành mặc định cho các neo. Cuối cùng, khi một trong hai accordion được nhấp vào, nó đặt 'kích hoạt' thành false trên khác để đóng accordion khác và làm cho nó có vẻ như họ là một phần của cùng một. Điều này làm việc rất tốt cho tôi như vậy.

P.S. Ứng dụng của tôi là trên đường ray, và để phát hiện xem accordion thứ hai có được bật hay không (thông qua chức năng ReleaseAccordion2), tôi tìm một lớp ('complete') được chuyển tới h3 trong accordion đầu tiên (thông qua ruby ​​nhúng) .

Answer 10

Một cách đơn giản có thể sử dụng phương pháp unbind:

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

Thêm ui-state khuyết tật trong các yếu tố mà bạn muốn vô hiệu hóa.

Answer 11

Bạn có thể sử dụng sự kiện 'beforeActivate' cho việc này.

Thêm một lớp vô hiệu hóa để yếu tố h3 bạn

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

Đặt chức năng dưới đây để sự kiện 'beforeActivate'. Đối tượng header có thể được truy cập thông qua đối tượng 'ui.newHeader'. Kiểm tra nếu tiêu đề có 'accordionDisable' lớp, nếu đúng sau đó trở về sai và nó sẽ dừng phần accordion từ kích hoạt.

$("#your_accordion").accordion({ 

beforeActivate : function( event, ui ){ 

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

     return false; 

    } 
} 
}); 

Để kích hoạt phần accordian loại bỏ lớp 'accordionDisable'

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

Answer 12

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

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