1. घर
  2. सवाल और जवाब
  3. ट्विटर बूटस्ट्रैप (3.0.0) ड्रॉपडाउन और प्रोटोटाइपजेएस

ट्विटर बूटस्ट्रैप (3.0.0) ड्रॉपडाउन और प्रोटोटाइपजेएस

2013-08-22 20 views
11

मेरे पास एक ऐसा एप्लिकेशन है जो मैं धीरे-धीरे jQuery & में कनवर्ट करने के लिए काम कर रहा हूं बूटस्ट्रैप का उपयोग करने जा रहा था।ट्विटर बूटस्ट्रैप (3.0.0) ड्रॉपडाउन और प्रोटोटाइपजेएस

हालांकि ड्रॉप डाउन पर क्लिक करने के बाद बूटस्ट्रैप 3 का उपयोग करते समय, मेनू सही तरीके से प्रदर्शित होता है। हालांकि मेनू से क्लिक करने या मेनू को "बंद करने" के बाद। बटन/लिंक पूरी तरह गायब हो जाता है और पेज रीफ्रेश होने तक फिर से दिखाई नहीं देता है।

इस के रूप में एक ही: https://github.com/twbs/bootstrap/issues/8379

ऊपर के लिंक गूगल समूह से संपर्क करने के लिए कहते हैं, लेकिन मैं समूह में इस बारे में कुछ भी अनुरोध नहीं देखा है।

किसी भी मदद की सराहना की जाएगी!

धन्यवाद, डेविड

तो, @ GeekNum88 के मार्गदर्शन का उपयोग कर यदि आप इन पंक्तियों के बाहर टिप्पणी, लटकती काम करता है, अभी तक नहीं यकीन है कि यह की कुल प्रभाव:

function clearMenus() { 
    $(backdrop).remove() 
    $(toggle).each(function (e) { 
    var $parent = getParent($(this)) 
    if (!$parent.hasClass('open')) return 
//  $parent.trigger(e = $.Event('hide.bs.dropdown')) 
//  if (e.isDefaultPrevented()) return 
    $parent.removeClass('open').trigger('hidden.bs.dropdown') 
    }) 
}

स्रोत

2013-08-22 dcmoody

+0

जिज्ञासा से बाहर। क्या आपने बूटस्ट्रैप के पुराने संस्करण का उपयोग करने का प्रयास किया है? http://getbootstrap.com/2.3.2/ .. यदि हां, तो क्या आपको अभी भी वही परिणाम मिल रहा है? –

+1

यह एक समान प्रश्न के लिए मेरे उत्तरों में से एक है http://stackoverflow.com/questions/15087129/popover-hides-parent-element-if-used-with-prototype-js/15095654#15095654 –

+3

इस बूटस्ट्रैप अनुकूल का उपयोग करने का प्रयास करें prototype.js के रूप में यह एक ही प्रश्न के लिए मेरे मुद्दों को ठीक करता है: http://stackoverflow.com/questions/19139063/twitter-bootstrap-3-dropdown-menu-disappears-when-used-with-prototype-js – MWD

उत्तर

2

एक बूटस्ट्रैप बूंद को लागू करने -डाउन मेनू एक बहुत ही सरल काम है। बूटस्ट्रैप दस्तावेज में example देखें और इन चरणों का पालन करें:

1. टैग बस के नीचे शीर्षक टैग सिर के बीच में निम्नलिखित पुस्तकालयों को शामिल करें

यकीन है कि jQuery पुस्तकालय हो जाता है बनाओ बूस्ट्रैप जेएस पुस्तकालय से पहले लोड किया गया।

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

2. शरीर के बीच टैग में निम्नलिखित HTML पेस्ट

<div class="btn-group"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
    Action <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    <li><a href="#">Something else here</a></li> 
    <li class="divider"></li> 
    <li><a href="#">Separated link</a></li> 
    </ul> 
</div>

कार्य उदाहरण:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Bootstrap Dropdown</title> 

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 

</head> 

<body> 
    <div class="btn-group"> 
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
     Action <span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu" role="menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
     </ul> 
    </div> 
</body> 
</html>

साबित करने के लिए यह काम कर रहा है, देखना the fiddle।

स्रोत

2014-03-07 09:41:13 Eugene

+2

तय की है क्या आपने प्रश्न भी पढ़ा है? – dashard

संबंधित मुद्दे
नवीनतम प्रश्न

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