दिलचस्प पोस्ट
जावा में यूआरएल मैच के लिए नियमित अभिव्यक्ति मैं सी # में फ़ाइलों को कैसे लॉन्च करूँ Inno सेटअप: सत्यापित करें कि .NET 4.0 स्थापित है Webdriver.Dispose () के बीच का अंतर,। बंद करें () और .क्विट () एक अजगर स्क्रिप्ट के साथ एक शेल कमांड लॉन्च करें, समाप्ति की प्रतीक्षा करें और स्क्रिप्ट पर वापस लौटें अनचाहे त्रुटि: अपरिवर्तनीय उल्लंघन: तत्व का प्रकार अमान्य है: एक स्ट्रिंग (अंतर्निहित घटकों के लिए) या कक्षा / फ़ंक्शन की अपेक्षा की गई, लेकिन उसे मिला: ऑब्जेक्ट एंड्रॉइड: फ़ाइल को स्थायी रूप से सहेजें (स्पष्ट डेटा / अनइंस्टॉल के बाद भी) क्या किसी ने वास्तव में फाइबोनैचि-हीप को कुशलतापूर्वक लागू किया है? रिटर्निंग आईईइन्मेरेबल <T> बनाम IQueryable <T> Servicestack – वास्तुकला और सब कुछ के लिए POCOs reusing परीक्षण के लिए समीकरण यदि कोई बिंदु एक वृत्त के अंदर है क्या करता है | = (एकल पाइप बराबर) और & = (एक समानांतर और समान) मतलब है वीडियो की लंबाई प्राप्त करना अपवाद प्राप्त करना "IllegalStateException: इस क्रिया को सवेव इनस्टेंसस्टेट के बाद नहीं किया जा सकता" एंड्रॉइड INSTALL_FAILED_UID_CHANGED

बूटस्ट्रैप 3 शेवरॉन आइकन के साथ स्थिति को संक्षिप्त करें

संकुचित के लिए बूटस्ट्रैप 3 जावास्क्रिप्ट उदाहरण पृष्ठ से ली गई मुख्य उदाहरण का उपयोग करके, मैं शेवरॉन आइकनों का उपयोग करके पतन की स्थिति को दिखाने में सक्षम हूं।

मेरे पास यह काम कर रहा है:

$('#accordion .accordion-toggle').click(function (e) { var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-up'); $("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up"); }); 

यह काम करता है (पूरी तरह से सभी ब्राउज़रों में नहीं परीक्षण किया गया), लेकिन मैं सोच रहा हूं कि इस का एक और अधिक सुरुचिपूर्ण समाधान है?

आदर्श रूप से मैं मुख्य फ़ंक्शन का उपयोग करना चाहूंगा, लेकिन मुझे यकीन नहीं है कि इसके साथ समान परिणाम कैसे प्राप्त करें।

 $('#accordion').on('hidden.bs.collapse', function () { //do something... }) 

यहां जेएसफ़िल्ड में एक कामकाजी संस्करण है

Solutions Collecting From Web of "बूटस्ट्रैप 3 शेवरॉन आइकन के साथ स्थिति को संक्षिप्त करें"

निम्न HTML के लिए ( बूटस्ट्रैप 3 उदाहरणों से ):

 .panel-heading .accordion-toggle:after { /* symbol for "opening" panels */ font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */ content: "\e114"; /* adjust as needed, taken from bootstrap.css */ float: right; /* adjust as needed */ color: grey; /* adjust as needed */ } .panel-heading .accordion-toggle.collapsed:after { /* symbol for "collapsed" panels */ content: "\e080"; /* adjust as needed, taken from bootstrap.css */ } 
 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript" ></script> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div> 

आप इस तरह के कोड का उपयोग कर सकते हैं:

 function toggleChevron(e) { $(e.target) .prev('.panel-heading') .find('i.indicator') .toggleClass('glyphicon-chevron-down glyphicon-chevron-up'); } $('#accordion').on('hidden.bs.collapse', toggleChevron); $('#accordion').on('shown.bs.collapse', toggleChevron); 

=> काम करना जेएसफ़ैल्ड

सबसे अधिक उत्साह के साथ उत्तर में सुधार करने के लिए, आप में से कुछ ने पृष्ठ के शुरुआती भार पर गौर किया है कि एक ही दिशा में चेवरों के सभी बिंदु। यह घटकों को "ढह गई" वर्ग को जोड़कर ठीक किया गया है, जिसे आप ढंके हुए लोड करना चाहते हैं।

 <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div> 

यहां काम करने वाला बेला है: http://jsfiddle.net/3gYa3/585/

बिगेट्स और स्टेकपी के लिए धन्यवाद प्रश्नावली के उत्तर के रूप में, मैंने सभी शीर्ष लेखों को क्लिक करने योग्य (न केवल शीर्षक स्ट्रिंग और ग्लुफ़्स) बनाने के लिए थोड़ा बदलाव किए और लिंक से नीचे की ओर लहराया। एक माउस को आइकनों पर लागू करने के लिए सीएसएस निर्देशों के अंत में मैंने h4 जोड़ा यहां संशोधित कोड है:

 <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <h4 class="panel-title">Collapsible Group Item #1</h4> </a> </div> <div id="collapseOne" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> <h4 class="panel-title">Collapsible Group Item #2</h4> </a> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> <h4 class="panel-title">Collapsible Group Item #3</h4> </a> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div> 

और संशोधित सीएसएस:

 .panel-heading .accordion-toggle h4:after { /* symbol for "opening" panels */ font-family: 'Glyphicons Halflings'; content: "\e114"; float: right; color: grey; overflow: no-display; } .panel-heading .accordion-toggle.collapsed h4:after { /* symbol for "collapsed" panels */ content: "\e080"; } a.accordion-toggle{ text-decoration: none; } 

Bludream के उत्तर में सुधार:

आप निश्चित रूप से FontAwesome का उपयोग कर सकते हैं!

"पैनल-शीर्षक" वर्ग के साथ "ढह गई" को शामिल करना सुनिश्चित करें जब तक आप पैनल पर क्लिक नहीं करते तब तक "ढह गई" श्रेणी शामिल नहीं होती है, ताकि आप सही शेवर को प्रदर्शित करने के लिए "ढह गई" कक्षा को शामिल करना चाहते हैं (यानी, जब शेवरॉन-दाएं खाली हो जाएंगे तब शेवरॉन-राइट प्रदर्शित होता है)।

एचटीएमएल

 <div class="panel panel-default"> <div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseOrderItems1">Products 1 <i class="chevron fa fa-fw" ></i></div> <div class="collapse" id="collapseOrderItems1"> <p>Lorem ipsum...</p> </div> </div> 

सीएसएस

 .panel-heading .chevron:after { content: "\f078"; } .panel-heading.collapsed .chevron:after { content: "\f054"; } 

साथ ही, मौजूदा वर्ग का उपयोग करने के बजाय एक नया वर्ग बनाने के लिए यह एक अच्छा अभ्यास है।

उदाहरण के लिए कोडन देखें: http://codepen.io/anon/pen/PPxOJX

यहां कुछ शुद्ध सीएसएस सहायक वर्ग हैं जो आपको किसी भी प्रकार की टॉगल सामग्री को अपने HTML में ठीक से नियंत्रित कर सकते हैं।

यह किसी भी तत्व के साथ काम करता है जिसे आप स्विच करना चाहते हैं। जो कुछ भी आपका लेआउट है, आप इसे टॉगल तत्व में .if-collapsed और .if-not-collapsed classes के साथ कुछ तत्वों में डाल दिया है।

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

इसमें भी चयनकर्ता की आवश्यकता नहीं है , यह IE8 पर काम नहीं करता है।

HTML उदाहरण:

 <a class="btn btn-primary collapsed" data-toggle="collapse" href="#collapseExample"> <!--You can put any valid html inside these!--> <span class="if-collapsed">Open</span> <span class="if-not-collapsed">Close</span> </a> <div class="collapse" id="collapseExample"> <div class="well"> ... </div> </div> 

कम संस्करण:

 [data-toggle="collapse"] { &.collapsed .if-not-collapsed { display: none; } &:not(.collapsed) .if-collapsed { display: none; } } 

सीएसएस संस्करण:

 [data-toggle="collapse"].collapsed .if-not-collapsed { display: none; } [data-toggle="collapse"]:not(.collapsed) .if-collapsed { display: none; } 

सरल उदाहरण काम करना

  • शरीर की स्थिति को दिखाया गया / छिपा हुआ
  • अपने माता-पिता एएटी के पास जाओ
  • खोज आइकन प्राप्त करें
  • आइकॉन बदलें

सरल दर्ज करें

HTML :

 <body> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#jai">Jai</a> </div> <div id="jai" class="accordion-body collapse in"> <div> <div class="accordion-inner">body content 1</div> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">jai2</a> </div> <div id="collapseTwo" class="accordion-body collapse"> <div> <div class="accordion-inner">body content 2</div> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse3">jai3</a> </div> <div id="collapse3" class="accordion-body collapse"> <div> <div class="accordion-inner">body content 3</div> </div> </div> </div> </body> 

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

 $('div.accordion-body').on('shown', function () { $(this).parent("div").find(".icon-chevron-down") .removeClass("icon-chevron-down").addClass("icon-chevron-up"); }); $('div.accordion-body').on('hidden', function () { $(this).parent("div").find(".icon-chevron-up") .removeClass("icon-chevron-up").addClass("icon-chevron-down"); }); 

या … आप बस इस तरह से कुछ शैली डाल सकते हैं।

 .panel-title a.collapsed { background: url(../img/arrow_right.png) center right no-repeat; } .panel-title a { background: url(../img/arrow_down.png) center right no-repeat; } 

http://codepen.io/anon/pen/GJjrQN

मैं भयानक फ़ॉन्ट का उपयोग कर रहा हूँ! और एक पैनल खुलने योग्य होना चाहता था

  <div class="panel panel-default"> <div class="panel-heading" data-toggle="collapse" data-target="#collapseOrderItems"><i class="fa fa-chevron fa-fw" ></i> products</div> <div class="collapse in" id="collapseOrderItems"> .... </div> </div> 

और सीएसएस

 .panel-heading .fa-chevron:after { content: "\f078"; } .panel-heading.collapsed .fa-chevron:after { content: "\f054"; } 

यहां छवि विवरण दर्ज करें

यहां छवि विवरण दर्ज करें

कोनेरी जावास्क्रिप्ट-आधारित दृष्टिकोण के साथ मुद्दों का कारण लगता है (कम से कम जिन लोगों ने मैंने कोशिश की है) मुझे यहां यह समाधान मिला: http://www.codeproject.com/articles/987311/Collapsible-Responsive-Master-Child-Grid-Using-Ang । इसका सारांश टॉगल बटन पर data-ng-click का उपयोग करना है और $scope संदर्भ का उपयोग करके नियंत्रक में बटन को बदलने के लिए विधि बना रहा है।

मुझे लगता है कि मैं और अधिक विस्तार प्रदान कर सकता हूं … मेरे बटन div की प्रारंभिक अवस्था के ग्लिफ़िकोन पर सेट होते हैं (वे ग्लिफ़िकॉन-शेवरॉन-दायें == ढहते हुए div)।

page.html:

 <div class="title-1"> <button data-toggle="collapse" data-target="#panel-{{ p_idx }}" class="dropdown-toggle title-btn glyphicon glyphicon-chevron-right" data-ng-click="collapse($event)"></button> </div> <div id="panel-{{ p_idx }}" class="collapse sect"> ... </div> 

controllers.js:

 .controller('PageController', function($scope, $rootScope) { $scope.collapse = function (event) { $(event.target).toggleClass("glyphicon-chevron-down glyphicon-chevron-right"); }; ) 

यदि आप इसे केवल पैनलों के साथ उपयोग करने का प्रयास कर रहे हैं (नहीं accordeon), इस कोड का प्रयास करें:

 <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="collapse-toggle" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Panel heading with title</a> </h4> </div> <div id="collapseExample" class="panel-collapse collapse in"> <div class="panel-body"> Panel content </div> </div> </div> 

मैं एक शुद्ध एचटीएमएल दृष्टिकोण चाहता था क्योंकि मैं एक टेम्पलेट के माध्यम से उड़ान भरने के लिए एचटीएमएल का विस्तार और विस्तार करना चाहता था! मैं इस के साथ आया …

https://jsfiddle.net/3mguht2y/1/

 var noJavascript = ":)"; 

कौन सा किसी का उपयोग हो सकता है 🙂