jQuery अकॉर्डियन: खोलने से फलक को रोकने/changestart घटना

Question

मैं निम्न मार्कअप मिल गया है रद्द:

$("#accordion").accordion({ 
    header: "h3", 
    fillSpace: true, 
    changestart: function(event, ui) { 
     if (someConditionIsTrue()) { 
      event.stopPropagation(); 
      event.preventDefault(); 
      return (false); 
     } 
    } 
}); 

विचार है कुछ देखते हैं कि:

<div id="accordion" class="leftaligned"> 
    <div> 
     <h3><a href="#">Stakeholder</a></h3> 
     <div>Content</div> 
    </div> 
    <div> 
     <h3><a href="#">Relationships</a></h3> 
     <div>Blah blah</div> 
    </div> 
    <div> 
     <h3><a href="#">Address</a></h3> 
     <div>Yada yada</div> 
    </div> 
    <div> 
     <h3><a href="#">Contact Details</a></h3> 
     <div>Foo bar</div> 
    </div> 
</div> 

इस प्रकार मैं एक अकॉर्डियन बनाने ऐसे मामलों का उपयोग करें जो उपयोगकर्ता को पैन बदलने से रोकें, हालांकि घटना के उपरोक्त रद्द करने का कोई प्रभाव नहीं पड़ता है और पैन अभी भी बदला जा सकता है।

क्या पैन बदलने से रोकने का कोई तरीका है? मैंने परिवर्तन को रोकने के लिए वर्तमान फलक को प्रोग्रामेटिक रूप से सक्रिय करने का भी प्रयास किया, लेकिन यह एक और परिवर्तनीय घटना को चलाता है और सभी नरक टूट जाते हैं (accordion वास्तव में टूट जाता है)

Answer 1

मुझे एक वर्कअराउंड मिला जो मेरे संदर्भ में काम करता है - मैं इससे बचने से बचता हूं बस h3 हेडर (उनमें एक आईडी देने के बाद) को अक्षम करके पूरी तरह घटना को रद्द जब आवश्यक:

एचटीएमएल:

<div> 
    <h3 id="relationshipsHeader"><a href="#">Relationships</a></h3> 
    <div>Blah blah</div> 
</div> 

स्क्रिप्ट:

if (someConditionIsTrue()) { 
    $("#relationshipsHeader").attr("disabled", "disabled"); 
    // and so on... 
} 

Answer 2

$("#accordion .h3").unbind("click");

मेरे लिए काम करता है।

Answer 3

मैंने इसके लिए एक वृद्धि अनुरोध दायर किया: Ticket 6651।

Answer 4

accordion initing से पहले अपने तर्क के साथ अपने कस्टम क्लिक हैंडलर जोड़ें। स्टॉपइमीडिएटप्रॉपैगेशन एग्रीजन हैंडलर से पहले ईवेंट को रोक देगा।

$('.quiz-qa h3').click(function(e) {  
    if ($(this).hasClass("deleted")) { 
    e.stopImmediatePropagation(); 
    return false;  
    } 
});  
$('.quiz-qa').accordion(); 

Answer 5

हालांकि user438316 द्वारा एक ऐसी ही जवाब है, यह बहुत अधिक अनावश्यक कोड return false एक स्पष्ट कर्कश किया जा रहा है, ... कैसे बस के बारे में:

$('#accordion .deleted').click(function(e) {  
    e.stopImmediatePropagation(); 
});  
$('#accordion').accordion(); 

Answer 6

मैं इस व्यवहार की वजह से एक व्युत्पत्ति की जरूरत मैं खींचने योग्य और accordion चेनिंग था। मैं यहां एक ही समाधान की तलाश में किसी के लिए अपना समाधान डाल रहा हूं।

जिस व्यवहार से मैं बचने की कोशिश कर रहा था वह ड्रैगिंग के बाद एक एग्रीजन परिवर्तन को ट्रिगर कर रहा था जब हेडर दोनों accordion और draggable के लिए हैंडल हैं। इसलिए, हर बार जब आप खींचते हैं, तो यह वर्तमान में विस्तारित सामग्री अनुभाग को ध्वस्त कर देता है।

HTML:

var $container = ('<div id="accordion">'); 
var $content = ('<div>'); 
$content.append(
    '<h1>Header 1</h1>' + 
    '<div>Content 1</div>' + 
    '<h1>Header 2</div>' + 
    '<div>Content 2</div>' 
); 

जे एस:

$container.append($controls) 
.draggable({ 
    handle: ':header', 
    start: function(event, ui) { 
     $(event.toElement).addClass('ui-dragging'); 
    } 

}); 
$container.find(':header').click(function (event) { 
    var $this = $(this); 
    if ($(this).hasClass('ui-dragging')) { 
     event.stopImmediatePropagation(); 
     $this.removeClass('ui-dragging'); 
    } 
}); 
$container.accordion({ 
    collapsible: true, 
    header: ':header' 
}); 

Answer 7

मैं अकॉर्डियन गतिशील की सामग्री बनाने रहा हूँ, इसलिए घटना कॉल करने से पहले अकॉर्डियन उत्पन्न होता है मेरे लिए काम नहीं कर रहा है बंधन। इसलिए मैंने रोकने के बाद स्टॉपइमीडिएटप्रॉपेशन को बाध्य करने की कोशिश की और यह मेरे लिए काम किया।

Answer 8

$("#accordion h3").unbind("click"); 

देखें jsFiddle-accordion

Answer 9

यह एक कुछ वर्षों के बाद प्रश्न मूल रूप से कहा गया था और मैं jQuery-यूआई 1.11.2 उपयोग कर रहा हूँ तो यह एक वैध जवाब तो नहीं हो सकता।

1. पहले हेडर का आईडी disable_this अक्षम करें, या किसी अन्य तरीके से आप प्रासंगिक हैडर (रों) चुन सकते हैं पता लगाना चाहते हैं दे:

   लेकिन यह मैं क्या सबसे अच्छा काम करने के लिए मिला है।

2. तो कोड

   $('h3#disable_this').addClass('ui-state-disabled'); 
   

तरीकों पहले जवाब (unbind("click") और e.stopImmediatePropogation()) में उल्लिखित के कुछ सीमित अर्थ में मेरे लिए काम किया है कि वे पैनल जब के उद्घाटन रोका की इस पंक्ति को जोड़ने हेडर क्लिक किया गया था। लेकिन मेरी विधि में 2 अतिरिक्त लाभ हैं:

• क्लिक करते समय एक हाइलाइट शैली पर हेडर को रोकता है।

• हेडर को अक्षम शैली प्रदान करता है।

बहुत अधिक उपयोगकर्ता के अनुकूल।

Answer 10

शायद यह पुराने jQueryUI में उपलब्ध है लेकिन यदि आप jQuery-UI 1.9.2 या नए का उपयोग करते हैं तो आप पहले एक्टिवेट ईवेंट में एग्रीजन को ध्वस्त कर सकते हैं;

beforeActivate: function (event, ui) { 
    event.preventDefault(); 
}