शीर्ष लेख div पर क्लिक करते समय बूटस्ट्रैप समझौते को कैसे करें?

Question

एक बूटस्ट्रैप समझौते में, aपाठ पर एक क्लिक की आवश्यकता के बजाय , मैं इसे panel-headingडिव में कहीं भी क्लिक करते समय संक्षिप्त करना चाहता हूं ।

मैं बूटस्ट्रैप 3 का उपयोग कर रहा हूं। इसलिए समझौते के बजाय, यह केवल एक बंधनेवाला पैनल है। किसी भी विचार कैसे पूरे पैनल को क्लिक करने योग्य है?

Comments

खैर आपको जवाब मिल गया। लेकिन, यह लिंक आपको बूटस्ट्रैप एकॉर्डियन

— मेन्स

Answer 1

तुम सब करने की ज़रूरत है उपयोग करने के लिए है ...

• data-toggle="collapse"
• data-target="#ElementToExpandOnClick"

... उस तत्व पर जिसे आप पतन / विस्तार प्रभाव को ट्रिगर करने के लिए क्लिक करना चाहते हैं।

साथ तत्व data-toggle="collapse"तत्व प्रभाव को ट्रिगर करेगा। data-targetविशेषता तत्व जब प्रभाव शुरू हो रहा है का विस्तार होगा कि इंगित करता है।

वैकल्पिक रूप से आप सेट कर सकते हैं data-parentयदि आप स्वतंत्र बंधनेवाला के बजाय एक समझौते का प्रभाव बनाना चाहते हैं, जैसे:

• data-parent="#accordion"

मैं निम्नलिखित सीएसएस को उन तत्वों के साथ भी जोड़ूंगा, data-toggle="collapse"यदि वे <a>टैग नहीं हैं , जैसे:

.panel-heading {
    cursor: pointer;
}

यहाँ बूटस्ट्रैप 3 प्रलेखन से संशोधित HTML के साथ एक jsfiddle है ।

Comments

ऐसा लगता है कि डिफ़ॉल्ट / डेमो कोड होना चाहिए। <a> उपयोग करने की तुलना में बहुत अच्छा है।

— dbn

इस विधि iPhone के लिए काम नहीं करता है। stackoverflow.com/questions/19866172// के उत्तर के अनुसार, इसे iPhone पर ढहने के लिए <a> (चूंकि इसे href की आवश्यकता है) की आवश्यकता है ... कोई विचार?

— माइनोव्स्की

@minovsky इस अपडेटेड JSFiddle के बारे में कैसे: jsfiddle.net/Tcgyx/60 ? दुर्भाग्य से मेरे पास परीक्षण करने के लिए iPhone नहीं है। यदि यह काम करता है तो मैं अपना जवाब अपडेट करूंगा।

— गंभीर

@ फिदेल के लिए धन्यवाद! यह हमेशा काम नहीं करता है, लेकिन मुझे अधिक प्रयोग करने दें और समझ लें कि क्या मैं असफलता को मज़बूती से पैदा कर सकता हूं।

— माइनोव्स्की

@wutzebaer आपके पास हो सकता है role="tab button"और ब्राउज़र सूची में पहले एक की व्याख्या करेगा जो इसे समझता है (सबसे अधिक संभावना है tab)। हालांकि, मुझे यकीन नहीं है कि दोनों में से कौन बेहतर है। tabऔर buttonभूमिकाओं के अर्थ खोजने की कोशिश करें और इससे आपको जवाब मिलेगा कि किसको चुनना है।

— ग्रिम

Answer 2

दूसरा तरीका यह है कि आप अपना <a>पूरा स्थान भरें panel-heading। ऐसा करने के लिए इस शैली का उपयोग करें:

.panel-title a {
    display: block;
    padding: 10px 15px;
    margin: -10px -15px;
}

इस डेमो ( http://jsfiddle.net/KbQyx/ ) की जाँच करें ।

फिर जब आप शीर्ष पर क्लिक कर रहे हैं, तो आप वास्तव में क्लिक कर रहे हैं <a>।

Comments

GWTBootstrap लाइब्रेरी का उपयोग करके हम में से उन लोगों के लिए एक महान समाधान।

— बर्फानी

मैंने इसे तब तक नहीं देखा जब तक मैंने एक समान समाधान लागू नहीं किया। सीएसएस परिवर्तन मेरे लिए सबसे कम आक्रामक परिवर्तन थे। मैंने प्रदर्शन को चुना: इनलाइन-ब्लॉक, चौड़ाई: 100% और चूंकि हम अपने लिए ग्लिफ़िकॉन का उपयोग कर रहे हैं, ए: इससे पहले मार्जिन-लेफ्ट: -10 पीएक्स और मार्जिन-राइट: 10 पीएक्स।

— किर्क लीमोहोन

यह विधि iOS उपकरणों पर काम नहीं करती है, जो आमतौर पर बूटस्ट्रैप के साथ काम करते समय एक प्राथमिक चिंता है।

— जेरेड

Jared, आप विस्तृत कर सकते हैं? यह कार्य कुछ सफारी संस्करणों तक सीमित क्यों नहीं है?

— डॉ। जन-फिलिप गेर्के

इस पद्धति का लाभ यह है कि यह AngularJS के लिए Boostrap UI के लिए भी काम करता है (जहाँ आप बूटस्ट्रैप के JS की आवश्यकता नहीं चाहते / चाहते हैं)।

— डॉ। जन-फिलिप गेर्के

Answer 3

मैंने ग्रिम की jsfiddle में कुछ छोटी खामियों पर ध्यान दिया है।

पैनल के पूरे उपयोग के लिए हाथ को बदलने के लिए सूचक प्राप्त करने के लिए:

.panel-heading {
   cursor: pointer;
}

मैं हटा दिया है <a>टैग (एक शैली मुद्दा) और रखा data-toggle="collapse" data-parent="#accordion" data-target="#collapse..."पर panel-headingभर।

मैंने font-awesome.cssअपने jsfiddle में उपयोग करते हुए, शेवरॉन प्रदर्शित करने के लिए एक सीएसएस विधि जोड़ी है :

http://jsfiddle.net/weaversnap/7FqsX/1/

Comments

यह लगभग काम करता है। जब पृष्ठ लोड होते हैं और पैनल में से एक को ढहाने के बाद खुद को सही करते हैं तो शेवरॉन उल्टा दिखाई देते हैं।

— कोनी डेसिंको

@ConnieDeCinko उल्टा शेवरॉन को ठीक panel-headingकरने के panel-heading collapsedलिए बदलें ।

— एमी बैरेट

Answer 4

यहाँ बूटस्ट्रैप 4 के लिए एक समाधान है। आपको बस टैग card-headerमें क्लास लगाने की आवश्यकता है a। यह W3Schools में एक उदाहरण से संशोधित है ।

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <div id="accordion">
    <div class="card">
      <a class="card-link card-header" data-toggle="collapse" href="#collapseOne" >
        Collapsible Group Item #1
      </a>
      <div id="collapseOne" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <a class="collapsed card-link card-header" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <a class="card-link card-header" data-toggle="collapse" href="#collapseThree">
        Collapsible Group Item #3
      </a>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
  </div>
</div>

Answer 5

सरल उपाय यह होगा कि आप पैडिंग को हटाकर इसमें .panel-headingजोड़ दें .panel-title a।

.panel-heading {
    padding: 0;
}
.panel-title a {
    display: block;
    padding: 10px 15px;
}

यह समाधान बछड़े द्वारा पोस्ट किए गए एक के समान है , थोड़ा अलग है।

Answer 6

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

इस कस्टम सीएसएस जोड़ें

 .panel-heading 
  {
   cursor: pointer;
   padding: 0;
  }

 a.accordion-toggle 
 {
  display: block;
  padding: 10px  15px;
 }

क्रेडिट इस पोस्ट उत्तरदाता को जाता है ।

आशा मदद करती है।

Answer 7

यहां बूटस्ट्रैप 4.3 के लिए काम करने का उदाहरण दिया गया है

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="accordion" id="accordionExample">
                <div class="card">
                    <div class="card-header" id="headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <h2 class="mb-0">
                            <button class="btn btn-link" type="button" >
                                Collapsible Group Item #1
                            </button>
                        </h2>
                    </div>

                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingTwo" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <h2 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" >
                                Collapsible Group Item #2
                            </button>
                        </h2>
                    </div>
                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingThree" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <h2 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" >
                                Collapsible Group Item #3
                            </button>
                        </h2>
                    </div>
                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
            </div>