केवल सही प्रतीक के क्लिक पर ओपन एकॉर्डन

Question

मैं क्लिकिंग ईवेंट को अक्षम करना चाहता हूं जो कि अगर मैं शीर्षक पर कहीं भी क्लिक करता हूं तो accordion खोलता है। इसके बजाय मैं केवल दाईं ओर दाईं ओर क्लिक करना चाहता हूं .... यहां अगर मैं सहेजें बटन पर क्लिक करें यह आ रही है ..

<accordion-group is-open="status.open" template-url="accordion-group.html"> 
     <accordion-heading> 
      I can have markup, too! <button type="button">Save</button> <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> 
     </accordion-heading> 
     This is just some content to illustrate fancy headings. 
    </accordion-group> 

यहाँ plunker है ..

link

Answer 1

अपने html फ़ाइल में मैं संशोधित:

<accordion close-others="oneAtATime"> 
    <accordion-group style="pointer-events:none !important;" is-open="status.open" template-url="accordion-group.html"> 
     <accordion-heading style="pointer-events:none !important;"> 
      I can have markup, too! <button style="pointer-events:none !important;" type="button">Save</button> <i class="pull-right glyphicon" style="pointer-events:auto !important;" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> 
     </accordion-heading> 
     This is just some content to illustrate fancy headings. 
    </accordion-group> 
    </accordion> 

आपको सीएसएस संपत्ति जोड़नी चाहिए: तत्वों पर "पॉइंटर-इवेंट्स: कोई नहीं! महत्वपूर्ण" जो आप माउस क्लिक इवेंट पर प्रतिक्रिया नहीं देंगे, और केवल अपने आइकन संकेतक पर "पॉइंटर-इवेंट्स: ऑटो! महत्वपूर्ण" सेट करें । जब आप तीर आइकन पर क्लिक करते हैं तो accordion केवल तब खोला जाना चाहिए। यही कारण है कि काम करना चाहिए :)

अपने समाधान अधिक सुरुचिपूर्ण आप की तरह सीएसएस वर्गों बना सकते हैं बनाने के लिए:

.disable-click-event { 
    pointer-events: none !important; 
} 

.enable-click-event { 
    pointer-events: auto !important; 
} 

वहाँ भी एक विकल्प है कि घटना ($ event.stopPropagation()) बुदबुदाती से बचाता है, लेकिन इस मामले में मैं यह नहीं पता कि वास्तव में कहां से इवेंट किया गया है, इसलिए इसे खोजने के लिए कठिन जांच की आवश्यकता है।

एक और संकेत: यदि किसी भी समस्या को जेएस के बजाय सीएसएस के साथ हल किया जा सकता है तो यह करने के लिए पूरी तरह से लायक है :) जावास्क्रिप्ट ईवेंट डीबग करना इतना आसान नहीं है, इसलिए सीएसएस फिक्स घटना के साथ गंदे बग की तुलना में बहुत तेज़ होगा बुदबुदाती। मैं आपको स्पष्ट विवेक के साथ सरल सीएसएस समाधानों का उपयोग करने की सलाह दे सकता हूं :) चीयर्स