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");
그게 다야
단순한 방법은 편향되지 않은 방법을 사용 할 수 있습니다.
$(".ui-state-disabled").unbind("click");
비활성화하려는 요소에 UI 상태 장애인 추가.
홈 링크처럼? 나는 아코디언 꼭대기에 "정기적으로"스타일의 홈 링크를 원했습니다. 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 옵션을 추가했습니다. 이렇게하면 비활성화 된 아코디언 객체 내부의 링크에 대한 클래스를 정의 할 수 있습니다. 예 :
$(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/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;
--- */
나는 비슷한 문제가 있었다. 나는 5 부의 아코디언이 필요했지만, 마지막 두 부분은 처음 3 개 (다른 조치를 제기 한)가 완료 될 때까지 접근 할 수 없었다. 내가 처리 한 방법은 다음과 같습니다 (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>
자바 스크립트 :
$(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'이 제공되므로 불투명도를 제공하고 마우스 커서를 앵커의 기본값으로 설정합니다. 마지막으로, 아코디언이 클릭되면 다른 아코디언을 닫고 동일한 것의 일부인 것처럼 보이도록 '활성화'를 다른 사람의 거짓으로 설정합니다. 이것은 나와 같이 잘 작동합니다.
추신 내 앱은 레일에 있으며, 두 번째 아코디언이 활성화되어야하는지 (릴리스 에코 코드온 2 함수를 통해) 첫 번째 아코디언에서 H3에 전달 된 클래스 ( '완료')를 찾습니다. ).
이를 위해 'Beforeactivate'이벤트를 사용할 수 있습니다.
H3 요소에 클래스 비활성화를 추가하십시오
<h3 class="accordionDisable disabledItemOne" >Title</h3>
아래 함수를 'Beforeactivate'이벤트로 설정하십시오. 헤더 객체는 'ui.newheader'객체를 통해 액세스 할 수 있습니다. 헤더에 '아코디언 디스티블'클래스가 있는지 테스트하고, 사실이라면 False를 반환하면 아코디언 섹션이 활성화되는 것을 중지합니다.
$( "#your_accordion" ).accordion({
beforeActivate : function( event, ui ){
if( ui.newHeader.hasClass( 'accordionDisable' ) ){
return false;
}
}
});
Accordian 섹션을 활성화하려면 '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;
});
<h3 class="disabled">Payment Information </h3>