jQuery यूआई अकॉर्डियन जो कई खंडों को खुला रखता है?

93

मैं एक बेवकूफ हो सकता हूं, लेकिन आप jQuery UI के अकॉर्डियन को कई वर्गों को कैसे खुला रख सकते हैं? सभी डेमो में एक समय में केवल एक ही खुला होता है ... मैं एक बंधनेवाला मेनू प्रकार प्रणाली की तलाश में हूं।

javascript  jquery  html  jquery-ui 
— वॉकर
स्रोत
18
— supersuphot
खैर, आपका प्लगइन एकदम सही है! बहुत बहुत धन्यवाद, दोस्त!
— सेक्सीबीटी

जवाबों:

94

यह मूल रूप से अकॉर्डियन के लिए jQuery UI प्रलेखन में चर्चा की गई थी :

नोट: यदि आप एक से अधिक अनुभाग खोलना चाहते हैं, तो एक अकॉर्डियन का उपयोग न करें

एक अकॉर्डियन एक ही समय में एक से अधिक कंटेंट पैनल को खोलने की अनुमति नहीं देता है, और इसे करने के लिए बहुत प्रयास करना पड़ता है। यदि आप एक ऐसे विजेट की तलाश में हैं जो एक से अधिक कंटेंट पैनल को खोलने की अनुमति देता है, तो इसका उपयोग न करें। आमतौर पर इसे jQuery की कुछ पंक्तियों के साथ लिखा जा सकता है, कुछ इस तरह से:

jQuery(document).ready(function(){
  $('.accordion .head').click(function() {
      $(this).next().toggle();
      return false;
  }).next().hide();
});

या एनिमेटेड:

jQuery(document).ready(function(){
  $('.accordion .head').click(function() {
      $(this).next().toggle('slow');
      return false;
  }).next().hide();
});

"मैं एक बेवकूफ हो सकता हूं" - यदि आप दस्तावेज नहीं पढ़ते हैं तो आप बेवकूफ नहीं हैं, लेकिन अगर आपको समस्याएँ हैं, तो आमतौर पर इसका समाधान खोजने में तेजी आती है।

— MvanGeest
स्रोत
9
यह समाधान किसी भी अकॉर्डिंग स्टाइल को नहीं करता है।
— फॉरेस्टो
12
इसके अलावा, यह सवाल का कोई हल नहीं है। समझौते के आंकड़े और विकल्प, घटनाओं आदि की सूची सिर्फ खराब है। और उपयोगकर्ता को यह बताने के बजाय "यदि हमारे पास आपके लिए विकल्प नहीं हैं - तो इसका उपयोग न करें!" उन्हें कहना चाहिए "खेद है कि अभी तक इसके लिए कोई विकल्प नहीं है, लेकिन हम किसी भी योगदानकर्ता का स्वागत करते हैं जो हमारे महान प्लगइन के लिए कार्यक्षमता जोड़ते हैं"
— आर्टग्रो
मेरे द्वारा उद्धृत पाठ को प्रलेखन से हटा दिया गया है। मैंने एक संग्रहीत संस्करण के लिए एक लिंक जोड़ा।
— MvanGeest
1
ध्यान रखें कि jQuery UI Accordion वास्तविक अकॉर्डियन प्रभाव बनाने की तुलना में अधिक करता है। यह स्क्रीन रीडर्स के लिए बहुत सारी एक्सेसिबिलिटी मार्कअप भी जोड़ता है।
— ब्रायन
2
इसका कोई मतलब नहीं है। अगर संगीतकारों की भुजाएँ अलग हों, सभी आघात बंद हो जाएँ यदि वाद्ययंत्र एक साथ हों, या बीच में कोई चीज हो तो सभी प्लेटों को खोल दिया जा सकता है। यदि शब्दों का कोई मतलब है, तो समझौते सॉफ्टवेयर यूआई नियंत्रण को खुले और बंद पैनल के किसी भी संयोजन की अनुमति देनी चाहिए।
— पक्षी
119

बहुत साधारण:

<script type="text/javascript">
    (function($) {
        $(function() {
            $("#accordion > div").accordion({ header: "h3", collapsible: true });
        })
    })(jQuery);
</script>

<div id="accordion">
    <div>
        <h3><a href="#">First</a></h3>
        <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
    </div>
    <div>
        <h3><a href="#">Second</a></h3>
        <div>Phasellus mattis tincidunt nibh.</div>
    </div>
    <div>
        <h3><a href="#">Third</a></h3>
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>
</div>
— 2upmedia
स्रोत
1
बढ़िया काम किया। मैंने ढहना create: function(event) { $(event.target).accordion( "activate", false ); }शुरू करने के लिए जोड़ा ।
— फॉरेस्टो
2
बहुत बढ़िया। इसे आपके लिए तैयार करने में खुशी हुई। :) मैं चीजों को यथासंभव सरल रखना पसंद करता हूं।
— 2upmedia
7
jquery-ui 1.10 में, शुरू करने के लिए, create: function(event) { $(event.target).accordion( "activate", false ); }आप के बजाय विकल्प सेट करने के लिए:{active: false}
— Damko
16
(फेसपालम) प्रत्येक ब्लॉक के लिए अलग-अलग समझौते।
— पॉल एनेकोव
2
यहाँ jsFiddle मैं इसे परीक्षण करने के लिए प्रयोग किया जाता है jsfiddle.net/txo8rx3q/1 मैंने कुछ सीएसएस को भी जोड़ा है जब यह विस्तारित होने पर चयनित दिखावट अनुभाग को रोकने के लिए जोड़ा गया
— मैथ्यू लॉक
77

यह एक समान धागे में प्रकाशित किया गया था, लेकिन यह यहां भी प्रासंगिक हो सकता है।

JQuery-UI समझौते के एक एकल उदाहरण के साथ इसे प्राप्त करना

जैसा कि दूसरों ने नोट किया है, Accordionविजेट में सीधे ऐसा करने के लिए एपीआई विकल्प नहीं है। हालाँकि, अगर किसी कारण से आपको विजेट का उपयोग करना चाहिए (जैसे कि आप एक मौजूदा सिस्टम बनाए रख रहे हैं), तो beforeActivateविजेट के डिफ़ॉल्ट व्यवहार को कम करने और अनुकरण करने के लिए ईवेंट हैंडलर विकल्प का उपयोग करके इसे प्राप्त करना संभव है ।

उदाहरण के लिए:

$('#accordion').accordion({
    collapsible:true,

    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(); }  else { currContent.slideDown(); }

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

एक jsField डेमो देखें

— बोअज
स्रोत
6
धन्यवाद! यह सबसे अच्छा समाधान है क्योंकि आपको अपने सभी मौजूदा वातावरण में कोई बदलाव नहीं चाहिए।
— Artgrohe
इसके लिए jQuery UI 1.9.0+ (Drupal 7 1.8.7 के साथ अटका हुआ है) की आवश्यकता है
— Capi Etheriel
1
मेरा मानना ​​है कि सक्रिय वर्ग बदल गया हैui-accordion-header-active
— टिम वर्मालेन जू
मेरे लिए बहुत अच्छा काम किया,
— रिफ्लेक्टिंग
अच्छा समाधान, केवल मुद्दा यह समाधान आइकन विकल्प नहीं ले जाएगा :-)
— Tachyons
20

या और भी सरल?

<div class="accordion">
    <h3><a href="#">First</a></h3>
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>    
<div class="accordion">
    <h3><a href="#">Second</a></h3>
    <div>Phasellus mattis tincidunt nibh.</div>
</div>         
<div class="accordion">
    <h3><a href="#">Third</a></h3>
    <div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
<script type="text/javascript">
    $(".accordion").accordion({ collapsible: true, active: false });
</script>
— रोमन गुडकोव
स्रोत
यह अच्छा imho है। आसान समाधान और यह उन मुद्दों को हल करता है जो मैं अकॉर्डियन आइटम के बड़े सेट के प्रदर्शन के साथ कर रहा था। आश्चर्यजनक रूप से समझौते का एक बड़ा सेट अच्छी तरह से करता है। धन्यवाद!
— कोड Novitiate
14

मैंने एक jQuery प्लगइन किया है जिसमें jQuery UI Accordion का एक ही रूप है और सभी टैब \ अनुभागों को खुला रख सकते हैं

आप इसे यहां देख सकते हैं

http://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/

एक ही मार्कअप के साथ काम करता है

<div id="multiOpenAccordion">
        <h3><a href="#">tab 1</a></h3>
        <div>Lorem ipsum dolor sit amet</div>
        <h3><a href="#">tab 2</a></h3>
        <div>Lorem ipsum dolor sit amet</div>
</div>

जावास्क्रिप्ट कोड

$(function(){
        $('#multiOpenAccordion').multiAccordion();
       // you can use a number or an array with active option to specify which tabs to be opened by default:
       $('#multiOpenAccordion').multiAccordion({ active: 1 });
       // OR
       $('#multiOpenAccordion').multiAccordion({ active: [1, 2, 3] });

       $('#multiOpenAccordion').multiAccordion({ active: false }); // no opened tabs
});

अद्यतन: डिफ़ॉल्ट सक्रिय टैब विकल्प का समर्थन करने के लिए प्लगइन को अपडेट किया गया है

अद्यतन: इस प्लगइन अब पदावनत है।

— अनस नकवा
स्रोत
महान कभी समाधान।
— त्रिमंत्र साफ्टवेयर सॉल्यूशन 30:56 '
6

दरअसल कुछ समय के लिए इसके समाधान के लिए इंटरनेट पर खोज की जा रही थी। और स्वीकृत उत्तर "पुस्तक द्वारा" उत्तर में अच्छा देता है। लेकिन मैं यह स्वीकार नहीं करना चाहता था कि मैं खोज करता रहा और यह पाया:

http://jsbin.com/eqape/1601/edit - लाइव उदाहरण

यह उदाहरण उचित शैलियों में खींचता है और एक ही समय में अनुरोधित कार्यक्षमता को जोड़ता है, प्रत्येक हेडर क्लिक पर अपनी स्वयं की कार्यक्षमता जोड़ने के लिए स्थान के साथ पूरा करता है। इसके अलावा कई divs "h3" s के बीच में होने की अनुमति देता है।

 $("#notaccordion").addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset")
  .find("h3")
    .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
    .hover(function() { $(this).toggleClass("ui-state-hover"); })
    .prepend('<span class="ui-icon ui-icon-triangle-1-e"></span>')
    .click(function() {
      $(this).find("> .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end()


        .next().toggleClass("ui-accordion-content-active").slideToggle();
        return false;
    })
    .next()
      .addClass("ui-accordion-content  ui-helper-reset ui-widget-content ui-corner-bottom")
      .hide();

HTML कोड:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Toggle Panels (not accordion) using ui-accordion  styles</title>

<!-- jQuery UI  |  http://jquery.com/  http://jqueryui.com/  http://jqueryui.com/docs/Theming  -->
<style type="text/css">body{font:62.5% Verdana,Arial,sans-serif}</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>


</head>
<body>

<h1>Toggle Panels</h1>
<div id="notaccordion">
  <h3><a href="#">Section 1</a></h3>
  <div class="content">
    Mauris mauris  ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus  nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a  nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur  malesuada. Vestibulum a velit eu ante scelerisque vulputate.
  </div>
  <h3><a href="#">Section 2</a></h3>
  <div>
    Sed non urna. Donec et ante. Phasellus eu ligula.  Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet,  mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo.  Vivamus non quam. In
    suscipit faucibus urna.
  </div>
  <h3><a href="#">Section 3</a></h3>
  <div class="top">
  Top top top top
  </div>
  <div class="content">
    Nam enim risus, molestie et, porta ac, aliquam ac,  risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede.  Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed  commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo  purus venenatis dui.
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item  three</li>
    </ul>
  </div>
  <div class="bottom">
  Bottom bottom bottom bottom
  </div>
  <h3><a href="#">Section 4</a></h3>
  <div>
    Cras dictum. Pellentesque habitant morbi tristique  senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante  ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae;  Aenean lacinia
    mauris vel est.
    Suspendisse eu nisl. Nullam ut libero. Integer  dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per  conubia nostra, per
    inceptos himenaeos.
  </div>
</div>

</body>
</html>`
— डोनोवन
स्रोत
5

मुझे एक मुश्किल समाधान मिला। एक ही फ़ंक्शन को दो बार कॉल करें, लेकिन अलग-अलग आईडी के साथ।

JQuery कोड

$(function() {
    $( "#accordion1" ).accordion({
        collapsible: true, active: false, heightStyle: "content"
    });
    $( "#accordion2" ).accordion({
        collapsible: true, active: false, heightStyle: "content"
    });
});

HTML कोड

<div id="accordion1">
    <h3>Section 1</h3>
    <div>Section one Text</div>
</div>
<div id="accordion2">   
    <h3>Section 2</h3>
    <div>Section two Text</div>
</div>
— SpritsDracula
स्रोत
2
आप classदूसरों द्वारा सुझाए गए के आधार पर एक एकल चयनकर्ता के साथ जाने से बेहतर हैं, इसका मतलब है कि आप अपने आप को नहीं दोहराते हैं ( DRY )
— Scotty.NET
4

सरल, एक से अधिक एंकर टैग का प्रतिनिधित्व करने वाले प्रत्येक एक्टीवियन div बनाएँ:

<div>
<div class="accordion">
<a href = "#">First heading</a>
</div>
<div class="accordion">
<a href = "#">First heading</a>
</div>
</div>

यह कुछ मार्कअप जोड़ता है। लेकिन एक समर्थक की तरह काम करता है ...

— अज़ीम
स्रोत
4

सरल: एक वर्ग के लिए अकॉर्डियन को सक्रिय करता है, और फिर इस के साथ divs बनाता है, जैसे अकॉर्डियन के उदाहरणों को गुणा करता है।

ऐशे ही:

जे एस

$(function() {
    $( ".accordion" ).accordion({
        collapsible: true,
        clearStyle: true,
        active: false,
    })
});

एचटीएमएल

<div class="accordion">
    <h3>Title</h3>
    <p>lorem</p>
</div>
<div class="accordion">
    <h3>Title</h3>
    <p>lorem</p>
</div>
<div class="accordion">
    <h3>Title</h3>
    <p>lorem</p>
</div>

https://jsfiddle.net/sparhawk_odin/pm91whz3/

— गिओवन क्रूज़
स्रोत
1
मैंने धागे में सभी उत्तरों की कोशिश की और यह सबसे अच्छा काम करता है। नवीनतम jquery और jqueryUI के साथ अब अन्य समाधानों के साथ बहुत सारे स्टाइलिंग मुद्दे हैं। यहां 2017 अपडेट jsfiddle.net/rambutan2000/eqbbgb7g
— जियोर्ड
@Geordie मुझे खुशी है कि मदद की।
— गियोवन क्रूज़
2

बस समझौते के प्रत्येक खंड को अपने अनुसार कहते हैं। सक्रिय: n पहले एक के लिए 0 होगा (इसलिए यह प्रदर्शित होगा) और बाकी के लिए 1, 2, 3, 4, आदि। चूँकि हर एक का खुद का अकॉर्डियन है, उन सभी के पास केवल 1 सेक्शन होगा, और बाकी को शुरू करने के लिए ढह जाएगा।

$('.accordian').each(function(n, el) {
  $(el).accordion({
    heightStyle: 'content',
    collapsible: true,
    active: n
  });
});
— Funkodebat
स्रोत
ध्यान दें यह पहले से ही 2upmedia के उत्तर में नीचे
— Boaz
2

और भी सरल, यह प्रत्येक ली टैग वर्ग की विशेषता में लेबल किया गया है और समझौते को शुरू करने के लिए प्रत्येक ली के माध्यम से लूप करने के लिए jquery है।

— मिकी
स्रोत
1

JQuery-UI समझौते के बिना, कोई भी ऐसा कर सकता है:

<div class="section">
  <div class="section-title">
    Section 1
  </div>
  <div class="section-content">
    Section 1 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
  </div>
</div>

<div class="section">
  <div class="section-title">
    Section 2
  </div>
  <div class="section-content">
    Section 2 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
  </div>
</div>

और जे.एस.

$( ".section-title" ).click(function() {
    $(this).parent().find( ".section-content" ).slideToggle();
});

https://jsfiddle.net/gayan_dasanayake/6ogxL7nm/

— गायन दासनायके
स्रोत
0

खुला जक्वेरी-उई - *। js

खोज $.widget( "ui.accordion", {

खोज _eventHandler: function( event ) {अंदर

परिवर्तन 

var options = this.options,             active = this.active,           clicked = $( event.currentTarget ),             clickedIsActive = clicked[ 0 ] === active[ 0 ],             collapsing = clickedIsActive && options.collapsible,            toShow = collapsing ? $() : clicked.next(),             toHide = active.next(),             eventData = {
                oldHeader: active,
                oldPanel: toHide,
                newHeader: collapsing ? $() : clicked,
                newPanel: toShow            };

सेवा 

var options = this.options,
    clicked = $( event.currentTarget),
    clickedIsActive = clicked.next().attr('aria-expanded') == 'true',
    collapsing = clickedIsActive && options.collapsible;

    if (clickedIsActive == true) {
        var toShow = $();
        var toHide = clicked.next();
    } else {
        var toShow = clicked.next();
        var toHide = $();

    }
    eventData = {
        oldHeader: $(),
        oldPanel: toHide,
        newHeader: clicked,
        newPanel: toShow
    };

इससे पहले active.removeClass( "ui-accordion-header-active ui-state-active" );

जोड़ना if (typeof(active) !== 'undefined') { और बंद करना}

का आनंद लें

— एलेक्स
स्रोत
-1

आप सिर्फ जेकरी प्रत्येक () फ़ंक्शन का उपयोग करते हैं;

$(function() {
    $( ".selector_class_name" ).each(function(){
        $( this ).accordion({
          collapsible: true, 
          active:false,
          heightStyle: "content"
        });
    });
});
— ब्लैक मम्बा
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.