मोबाइल स्क्रीन आकार पर स्विच करते समय स्वत: बंद बूटस्ट्रैप accordion पैनल

Question

बूटस्ट्रैप 2.3.2 का उपयोग करना मेरे पास एक पैनल के साथ एक accordion है जो पृष्ठ लोड होने पर खुला है।

  <div class="accordion" id="refine"> 
       <div class="accordion-heading"> 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search"> 
        Title 
       </a> 
       </div> 
       <div id="refine-search" class="accordion-body collapse in"> 
       <div class="accordion-inner"> 
        Test text.... 
       </div> 
       </div> 
      </div>      

साइट पूरी तरह उत्तरदायी है। मोबाइल स्क्रीन आकार में स्विच करते समय [@media (अधिकतम-चौड़ाई: 9 7 9 पीएक्स)] मैं चाहता हूं कि एग्रीजन पैनल स्वचालित रूप से बंद हो जाए, यानी प्रभावी रूप से मैं div refine-search line को "पतन आउट" में बदलना चाहता हूं।

मोबाइल मोड में, accordion अभी भी काम करना चाहिए, उदा। उपयोगकर्ता एग्रीजन हेडिंग पर क्लिक कर सकता है और पैनल विस्तारित होगा इसलिए मैं डुप्लिकेट divs को .hidden-desktop उपयोगिता कक्षाओं आदि का उपयोग करके पैनल को बंद करने के लिए नहीं चाहता हूं।

मैंने उत्तर के लिए उच्च और निम्न खोज की है - कर सकते हैं कोई मदद करता है?

Answer 1

तो आखिरकार मुझे पता चला कि यह कैसे करना है, इसे किसी के लिए मदद की स्थिति में पोस्ट करना।

ऑल्टर करने के लिए HTML:

<div class="accordion" id="refine"> 

    <div class="hidden-phone"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search"> 
       <legend> 
        <h2>Refine your search</h2></legend> 
      </a> 
     </div> 
    </div> 

    <div class="visible-phone"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search"> 
       <legend> 
        <h2>Refine your search (press to reveal)</h2></legend> 
      </a> 
     </div> 
    </div> 

    <div id="refine-search" class="accordion-body collapse in"> 

     <div class="accordion-inner"> 

      Test text.... 
     </div> 

    </div> 

</div> 

और फिर इस फ़ाइल में JS का उपयोग करें।

$(window).bind('resize load', function() { 
    if ($(this).width() < 767) { 
     $('#refine-search').removeClass('in'); 
     $('#refine-search').addClass('out'); 
    } else { 
     $('#refine-search').removeClass('out'); 
     $('#refine-search').addClass('in'); 
    } 
}); 

Answer 2

बूटस्ट्रैप 3.x के लिए यह उनके उदाहरण कोड के लिए कोई परिवर्तन नहीं के साथ महान काम किया:

$(window).bind('resize load', function() { 
    if ($(this).width() < 767) { 
     $('.collapse').removeClass('in'); 
     $('.collapse').addClass('out'); 
    } else { 
     $('.collapse').removeClass('out'); 
     $('.collapse').addClass('in'); 
    } 
}); 

Answer 3

किसी को भी जो इस सूत्र भर आता है: 2/17/17, जब मैं में आए के रूप में यह थ्रेड, दोनों accordion पैनल डेस्कटॉप और मोबाइल पर प्रदर्शित किए गए थे। व्यूपोर्ट आकार के आधार पर कक्षाएं "छुपा-फोन" और "दृश्यमान फ़ोन" दिखाई नहीं दे रही थीं। मैंने संबंधित छेदों में "छुपा-एक्सएस" और "दृश्य-एक्सएस" जोड़ा जो accordion शीर्षलेख को लपेटता है और मेरा मानना ​​है कि यह अब काम कर रहा है क्योंकि यह 3 साल पहले था।

आरटीपी हैरी ने समझाया है, आपको कक्षा को "बाहर" जोड़ने और हटाने की आवश्यकता नहीं है, इसलिए मैंने इसे हटा दिया। इसके अलावा मैंने कोई अतिरिक्त संपादन नहीं किया।

$(window).bind('resize load', function() { 
 
    if ($(this).width() <= 767) { 
 
    $('#refine-search').removeClass('in'); 
 
    } else { 
 
    $('#refine-search').addClass('in'); 
 
    } 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="accordion" id="refine"> 
 
    <div class="hidden-phone hidden-xs"> 
 
    <div class="accordion-heading"> 
 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search"> 
 
     <legend> 
 
      <h2>Desktop: Refine your search</h2> 
 
     </legend> 
 
     </a> 
 
    </div> 
 
    </div> 
 

 
    <div class="visible-phone visible-xs"> 
 
    <div class="accordion-heading"> 
 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search"> 
 
     <legend> 
 
      <h2>Mobile: Refine your search (press to reveal)</h2> 
 
     </legend> 
 
     </a> 
 
    </div> 
 
    </div> 
 

 
    <div id="refine-search" class="accordion-body collapse in"> 
 
    <div class="accordion-inner"> 
 
     Test text.... 
 
    </div> 
 
    </div> 
 
</div>

मेरे उदाहरण: http://www.bootply.com/ZAahtL5zGp