JQuery UI Accordion, किसी अन्य फ़ंक्शन के साथ हेडर को बटन/लिंक कैसे डालें

Question

मैं वास्तव में इस मुद्दे के बारे में पागल हो रहा हूं और मुझे आपकी मदद से खुशी होगी।

मेरे पास एक JQuery accordion है जो ठीक काम कर रहा है। मैं हेडर के दाहिने कोने में एक एक्स रखना चाहता हूं जो आइटम को सूची से हटा देता है लेकिन मैं ऐसा करने में सक्षम नहीं हूं। हेडर स्वयं <h3><a> HEADER </a></h3 टैग के भीतर है। यह शंकु खोल रहा है। जब मैं हेडर को एक और लिंक डालता हूं तो accordion सही ढंग से नहीं दिखाया जाता है। क्या कोई अन्य लिंक/बटन डालने का कोई मौका है, और यदि उपयोगकर्ता उस पर क्लिक करता है तो मैं इसे पकड़ सकता हूं और आइटम को हटा सकता हूं?

मैंने एक और विधि की कोशिश की, मैंने बटन को सामग्री में एक div में रखा और इसे स्थिति के माध्यम से शीर्ष पर ले जाने की कोशिश की: रिश्तेदार और -20px, लेकिन यह नहीं दिखाया गया है, यह हेडर से ओवरराइट किया गया है, हालांकि मैंने सेट किया है जेड-इंडेक्स एक उच्च मूल्य के लिए।

एक बहुत ही आसान चीज़ की तरह लगता है, और शायद मुझे कुछ याद आया ... लेकिन मैंने इस पर इतने सारे घंटे बिताए और इतनी सारी साइटों की खोज की लेकिन इसे हल करने में सक्षम नहीं था। किसी भी मदद की सराहना की जाएगी।

धन्यवाद, मार्सेल

Answer 1

यह मैं घटनाओं के हस्तक्षेप के बिना यूआई-अकॉर्डियन हैडर में यूआई बटन डाल करने के लिए मदद करता है:

$("#accordion").accordion({ header: "> div > .h3" }); 
$("#check").button(); 
$("#check-label").click(function(event){ 
    event.stopPropagation(); // this is 
    event.preventDefault(); // the magic 
    log("clicked!"); 
}); 

<div id="accordion"> 
    <div> 
     <div class="h3"> 
      <div class="right-button"> 
       <input type="checkbox" id="check" /><label for="check" id="check-label"></label> 
      </div> 
      <a href="#">First</a> 
     </div> 
     <div> 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 

     </div> 
    </div> 
    <div> 
     <div class="h3"> 
      <a href="#">Second</a> 
     </div> 
     <div>Phasellus mattis tincidunt nibh.</div> 
    </div> 
    <div> 
     <div class="h3"> 
      <a href="#">Third</a> 
     </div> 
     <div>Nam dui erat, auctor a, dignissim quis.</div> 
    </div> 
</div> 

Answer 2

एक पुराना पोस्ट है, लेकिन उन लोगों के लिए, यह क्या है मैं समाप्त हो गया है एच 3 हेडर के अंदर एक ब्लॉक बना रहा है। फिर मैंने ब्लॉक में टूलबार नामक कक्षा को जोड़ा। फिर टूलबार क्लास के साथ ब्लॉक के अंदर सभी एंकरों को प्राप्त करने के लिए jquery selector का उपयोग किया और प्रत्येक के क्लिक ईवेंट को बाध्य करें। क्लिक इवेंट के अंदर, मैंने ब्राउज़र को सेट करने के लिए वर्तमान तत्व href विशेषता का उपयोग किया। ब्राउज़र मूल्य को ब्राउज़र पर उस पृष्ठ पर मजबूर करने के लिए जिसे मैं नेविगेट करना चाहता था। इस उदाहरण में यह एक संपादन और पृष्ठ हटा है।

<div id="accordion"> 
    <h3>Header 1 
    <span style="float:right;" class="toolbar ui-widget-header ui-corner-all"> 
    <a href="/EditPage.html">Edit</a> 
    <a href="/DeletePage.html">Delete</a> 
    </span> 
    </h3> 
    <div> 
    Content 1 
    </div> 
    <h3>Header 2 
    <span style="float:right;" class="toolbar ui-widget-header ui-corner-all"> 
    <a href="/EditPage.html">Edit</a> 
    <a href="/DeletePage.html">Delete</a> 
    </span> 
    </h3> 
    <div> 
    Content 2 
    </div> 
</div> 

<script type="text/javascript"> 
$("#accordion").accordion(); 

$(".toolbar a").live("click", function() { 
    window.location($(this).attr("href")); 
}); 
</script> 

Answer 3

यह संभव है कि अन्य उत्तरों कुछ समय पर काम करते हैं, और कुछ परिस्थितियों में काम कर सकते हैं।

मुझे यह पता चला है कि यह आधुनिक jQuery और जावास्क्रिप्ट के साथ दो दृष्टिकोणों के संयोजन का उपयोग करने के लिए काम करता है। मैं कहां से नौकरी पोस्टिंग की एक सूची में लिंक का एक सेट में डाल दिया है, और लिंक 'applyNowLink' कक्षा में सभी कर रहे हैं:

मेरे लिए

$(".applyNowLink").on("click", null, null, function(event) { 
     window.location.href = $(this).attr("href"); 
     event.preventDefault(); 
}); 

काम करता है। डिफ़ॉल्ट कार्रवाई को रोकने से दो ईमेल विंडो खुलने का कारण नहीं था (href mailto:)