jquery ui accordion - एकाधिक accordions सभी स्टाइल समस्याओं का विस्तार/पतन

मैं एक accordion बनाने का प्रयास कर रहा हूं जहां मैं एक क्लिक के साथ सभी वर्गों को विस्तृत/संक्षिप्त कर सकता हूं। मुझे उपयोगकर्ता को एक समय में 0-एन अनुभाग खोलने वाले अनुभागों को खोलने और बंद करने की क्षमता की भी आवश्यकता है। स्टैक ओवरफ्लो और jquery मंचों पर यहां कई चर्चाओं का उपयोग करके, यहां समाधान है जिसके साथ मैं आया हूं: मैंने प्रत्येक अनुभाग को अपने स्वयं के accordion के रूप में कार्यान्वित किया है, जहां प्रत्येक को संक्षिप्त करने के लिए सेट किया गया है = सत्य।jquery ui accordion - एकाधिक accordions सभी स्टाइल समस्याओं का विस्तार/पतन

<html> 
    <head> 
     <title>Accordion Test</title> 

     <script type="text/javascript" src="../scripts/jquery-1.4.2.min.js"></script> 
     <script type="text/javascript" src="../scripts/jquery-ui-1.8.4.custom.min.js"></script> 

     <link rel="stylesheet" href="../_templates/css/jquery-ui-1.8.6.custom.css" type="text/css" /> 
     <link rel="stylesheet" href="../_templates/css/jquery.ui.accordion.css" type="text/css" /> 
    </head> 

<body> 
     <a onClick="expandAll()">Expand All</a> 
     <br> 
     <a onClick="collapseAll()">Collapse All</a> 
      <div id="accordion1" class="accord"> 
      <h5><a href="#">section 1</a></h5> 
      <div> 
        section 1 text 
      </div> 
      </div> 

      <!-- orders section --> 
      <div id="accordion2" class="accord"> 
      <h5><a href="#">section 2</a></h5> 
      <div> 
        section 2 text 
      </div> 
      </div> 

      <!-- section 3 --> 
      <div id="accordion3" class="accord"> 
      <h5><a href="#">section 3</a></h5> 
      <div> 
        section 3 text 
      </div> 
      </div> 

      <!-- section 4 --> 
      <div id="accordion4"> 
      <h5><a href="#">section 4</a></h5> 
      <div> 
        section 4 text     
      </div> 
      </div> 


</body> 
</html> 


<script type="text/javascript"> 

$(function() { 
    $('#accordion1').accordion({ 
     header: 'h5', 
     collapsible: true, 
     autoHeight: false 
    }); 
}); 
$(function() { 
    $('#accordion2').accordion({ 
     header: 'h5', 
     collapsible: true, 
     autoHeight: false, 
     active: false 
    }); 
}); 
$(function() { 
    $('#accordion3').accordion({ 
     header: 'h5', 
     collapsible: true, 
     autoHeight: false, 
     active: false 
    }); 
}); 
$(function() { 
    $('#accordion4').accordion({ 
     header: 'h5', 
     collapsible: true, 
     autoHeight: false, 
     active: false 
    }); 
}); 

</script> 

<script type="text/javascript"> 
$(document).ready(function() { 

}) 

function expandAll() { 
    alert("calling expandAll"); 
    $("#accordion1, #accordion2, #accordion3, #accordion4") 
     .filter(":not(:has(.ui-state-active))") 
     .accordion("activate", 0); 
} 

function collapseAll() { 
    alert("calling collapseAll"); 
    $("#accordion1, #accordion2, #accordion3, #accordion4") 
     .filter(":has(.ui-state-active)") 
     .accordion("activate", -1); 
} 

</script>

समस्या मैं में चल रहा हूँ

, है जब मैं एक खुली खंड के शीर्षक पर क्लिक करें, अनुभाग के रूप में उम्मीद ध्वस्त हो गई है, लेकिन शीर्ष लेख अभी भी "ui राज्य फोकस" वर्ग है, मैं जब तक पेज पर कहीं और क्लिक करें। तो मैं यूई में जो देखता हूं वह है कि खंड के शीर्षलेख में मेरे होवर प्रभाव के समान पृष्ठभूमि रंग होता है, जब तक कि मैं कहीं और क्लिक नहीं करता, और यह 'डिफ़ॉल्ट, केंद्रित नहीं' रंग में बदल जाता है।

इसके अतिरिक्त, जब मैं संकुचित सभी लिंक का उपयोग करता हूं, तो फ़ायरफ़ॉक्स में सभी बेहतरीन लगते हैं। आईई में, अंतिम अनुभाग शीर्षलेख में एक ही होवर-फ़ोकस रंग होता है।

कोई सुझाव? क्या मुझे किसी भी तरह से बंद होने पर फोकस खोने के लिए मजबूर करने की आवश्यकता है? मैं इसे कैसे पूरा करूं?

स्रोत

2011-02-01 tia

यह एक अकॉर्डियन के लिए समाधान नहीं है। नमूना में एकाधिक accordions का उपयोग किया जाता है। – jmav

पृष्ठ पर मेरी jquery-ui शैलियों को ओवर-सवारी करने का प्रयास करने के बाद, और यूई-स्टेट-फोकस क्लास को हटाने के लिए एग्रीजन जावास्क्रिप्ट को हैक करने का प्रयास करने के बाद, एक साधारण समाधान प्रकाश में आया।

क्योंकि मेरा पृष्ठ अपेक्षित व्यवहार प्रदर्शित कर रहा है जब मैं पृष्ठ पर कहां क्लिक करता हूं, तो मैंने फोकस खोने के लिए धुंध() का उपयोग किया।

$(document).ready(function() { 
    // forces lose focus when accordion section closed. IE and FF. 
    $(".ui-accordion-header").click(function(){ 
      $(this).blur(); 
     }); 

})

आईई में सभी मुद्दों को पतन को ठीक करने के लिए, मैंने अपने पतन (1) विधि में 1 पंक्ति जोड़ा।

function collapseAll() { 
    alert("calling collapseAll"); 
    $("#accordion1, #accordion2, #accordion3, #accordion4") 
     .filter(":has(.ui-state-active)") 
     .accordion("activate", -1); 
    $(".ui-accordion-header").blur(); 
}

स्रोत

2011-02-09 02:12:29 tia

सभी खुले पैनलों के साथ accordion को लागू करने के लिए समाधान। पैनल स्थिर हैं और बंद नहीं किया जा सकता है।

accordion विजेट के साथ accordion div प्रारंभ न करें!

$("#accordion").addClass("ui-accordion ui-widget ui-helper-reset") 
    .find('h3') 
    .addClass("current ui-accordion-header ui-helper-reset ui-state-active ui-corner-top") 
    .prepend('<span class="ui-icon ui-icon-triangle-1-s"/>') 
    .next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active");

स्रोत

2011-04-12 12:46:42 jmav

यह मेरा जवाब है ~ कई के लिए उसके सहायता

आशा खोलने आप इस तरह कर सकते हैं मौजूदा jQuery UI का उपयोग सिर्फ एक विकल्प beforeActivate में जोड़ने के द्वारा:

मेरे कोड के नीचे:

jQuery UI accordion that keeps multiple sections open?

और फू:

$("#accordion").accordion({ 
     header: "> div > h3", 
     autoHeight: false, 
     collapsible: true, 
     active: false, 
     beforeActivate: function(event, ui) { 
      // The accordion believes a panel is being opened 
      if (ui.newHeader[0]) { 
       var currHeader = ui.newHeader; 
       var currContent = currHeader.next('.ui-accordion-content'); 
      // The accordion believes a panel is being closed 
      } else { 
       var currHeader = ui.oldHeader; 
       var currContent = currHeader.next('.ui-accordion-content'); 
      } 
      // Since we've changed the default behavior, this detects the actual status 
      var isPanelSelected = currHeader.attr('aria-selected') == 'true'; 

      // Toggle the panel's header 
      currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString())); 

      // Toggle the panel's icon 
      currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected); 

      // Toggle the panel's content 
      currContent.toggleClass('accordion-content-active',!isPanelSelected)  
      if (isPanelSelected) { currContent.slideUp('fast'); } else { currContent.slideDown('fast'); } 

      return false; // Cancels the default action 
     } 
    });

से उल्लेख nction पतन और

function accordion_expand_all() 
{ 
    var sections = $('#accordion').find("h3"); 
    sections.each(function(index, section){ 
    if ($(section).hasClass('ui-state-default') && !$(section).hasClass('accordion-header-active')) { 
     $(section).click(); 
    } 
    }); 

} 

function accordion_collapse_all() 
{ 
    var sections = $('#accordion').find("h3"); 
    sections.each(function(index, section){ 
    if ($(section).hasClass('ui-state-active')) { 
     $(section).click(); 
    } 
    }); 
}

यह है कि ..

स्रोत

2013-08-07 03:39:06

बहुत अच्छा समाधान! पसंद है! बहुत बढ़िया! –

आप इस छोटे, हल्के प्लगइन कोशिश कर सकते हैं का विस्तार करें।

इसमें कुछ विकल्प उपलब्ध होंगे जिन्हें हम अपनी आवश्यकता के अनुसार संशोधित कर सकते हैं।

यूआरएल:http://accordion-cd.blogspot.com/

स्रोत

2014-05-14 13:01:45

jquery ui accordion - एकाधिक accordions सभी स्टाइल समस्याओं का विस्तार/पतन

उत्तर

संबंधित मुद्दे