क्लिक के बजाय होवर पर ट्विटर बूटस्ट्रैप मेनू ड्रॉपडाउन कैसे करें

1180

मैं अपने बूटस्ट्रैप मेनू को स्वचालित रूप से होवर पर छोड़ना चाहता हूं, बजाय मेनू शीर्षक पर क्लिक करने के। मैं भी मेनू शीर्षक के बगल में छोटे तीर खोना चाहते हैं।

css  drop-down-menu  twitter-bootstrap 
— लड़खड़ाना
स्रोत
9
उसके लिए एक समाधान है, इसलिए मिक्को का उत्तर सही है लेकिन विशेष रूप से उस स्थिति के लिए एक प्लगइन के साथ कवर किया गया है। बूटस्ट्रैप-होवर-ड्रॉपडाउन
— हेनरीडब्ल्यू
2
मेरा नया प्रकाशित उचित प्लगइन देखें जो नीचे के सीएसएस और जेएस समाधानों के मुद्दों को रोकता है, और आईओएस पर और टच घटनाओं के साथ आधुनिक डेस्कटॉप ब्राउज़रों पर ठीक काम करता है। यहाँ तक कि aria विशेषताएँ इसके साथ ठीक काम कर रही हैं: github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
— István Ujj-Mészáros
मैंने बूटस्ट्रैप नेबार के साथ एक शुद्ध CSS3 ड्रॉपडाउन बनाया, इसे कोडपेन प्योर CSS3 ड्रॉपडाउन पर देखें
— गोथबर्ज़
18
दो बार सोचो अगर आपको वास्तव में इसकी आवश्यकता है? बूटस्ट्रैप अनुकूली साइटों के लिए उपयोग कर रहा है। इसका मतलब है कि उनका उपयोग स्पर्श नियंत्रण के साथ ही उपकरणों पर भी किया जाएगा। इसलिए इसे इस तरह से डिजाइन किया गया है। टच स्क्रीन पर कोई "होवर" नहीं है।
— सर्ज .by
— बजे

जवाबों:

589

मैंने नवीनतम (v2.0.2) बूटस्ट्रैप ढांचे के आधार पर होवर ड्रॉपडाउन मेनू पर एक शुद्ध बनाया, जिसमें कई सबमेनस के लिए समर्थन है और सोचा कि मैं इसे भविष्य के उपयोगकर्ताओं के लिए पोस्ट करूंगा:

body {
  padding-top: 60px;
  padding-bottom: 40px;
}

.sidebar-nav {
  padding: 9px 0;
}

.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
  visibility: visible;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
  margin-top: 0;
}

.navbar .sub-menu:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}

.navbar .sub-menu:after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a href="#" class="brand">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a>
                <ul class="dropdown-menu sub-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 class="nav-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form action="" class="navbar-search pull-left">
          <input type="text" placeholder="Search" class="search-query span2">
        </form>
        <ul class="nav pull-right">
          <li><a href="#">Link</a></li>
          <li class="divider-vertical"></li>
          <li class="dropdown">
            <a class="#" href="#">Menu</a>
          </li>
        </ul>
      </div>
      <!-- /.nav-collapse -->
    </div>
  </div>
</div>

<hr>

<ul class="nav nav-pills">
  <li class="active"><a href="#">Regular link</a></li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu" id="menu1">
      <li>
        <a href="#">2-level Menu <i class="icon-arrow-right"></i></a>
        <ul class="dropdown-menu sub-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 class="nav-header">Nav header</li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </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>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
</ul>
स्निपेट का विस्तार करें

डेमो

— एंड्रेस इलिच
स्रोत
54
यह बूटस्ट्रैप में एक डिजाइन निर्णय है जो हॉवर ईवेंट पर ड्रॉपडाउन को नहीं खोल सकता है ...
— caarlos0
18
बहुत अच्छा! मैंने भी हटा दिया class="dropdown-toggle" data-toggle="dropdown"ताकि केवल होवर हो, न कि क्लिक मेनू को ट्रिगर करे। ध्यान दें कि जब आप उत्तरदायी शैलियों का उपयोग कर रहे हैं, तो मेनू अभी भी शीर्ष दाईं ओर छोटे बटन में बह गया है, जो अभी भी एक क्लिक से चालू है। बहुत धन्यवाद!
— पीटीम
11
छोटे उपकरणों (जैसे फोन) पर ऑटो ड्रॉप डाउन से बचने के लिए और इसके लिए इसे मिनट-चौड़ाई के उदाहरण के रूप में देखें। 768px do @media (min-width: 768px) {.dropdown-menu li:hover .sub-menu {visibility: visible;}}और@media (min-width: 768px) {.dropdown:hover .dropdown-menu {display: block;}}
— क्रिस ऐलेब्रैच
1
क्लिक करने योग्य बच्चों के साथ लिंक बनाने के लिए, आपको <a> टैग पर "डेटा-टॉगल = 'ड्रॉपडाउन" निकालना होगा।
— joan16v
2
यहाँ एक कोड है जो नवीनतम बूटस्ट्रैप 3 संस्करण के साथ काम करता है: jsfiddle.net/sgruenwald/2tt8f8xg
— Stefan Gruenwald
910

मेनू को स्वचालित रूप से होवर पर छोड़ने के लिए फिर यह मूल CSS का उपयोग करके प्राप्त किया जा सकता है। आपको चयनकर्ता को छिपे हुए मेनू विकल्प पर काम करना होगा और फिर उपयुक्त liटैग के ऊपर मंडराते समय इसे ब्लॉक के रूप में प्रदर्शित करने के लिए सेट करना होगा। ट्विटर बूटस्ट्रैप पेज से उदाहरण लेते हुए, चयनकर्ता निम्नानुसार होगा:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

हालाँकि, यदि आप बूटस्ट्रैप की उत्तरदायी विशेषताओं का उपयोग कर रहे हैं, तो आप इस कार्यक्षमता को एक ढह चुके नावबार (छोटे स्क्रीन पर) पर नहीं चाहेंगे। इससे बचने के लिए, ऊपर दिए गए कोड को मीडिया क्वेरी में लपेटें:

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

तीर (कैरट) को छिपाने के लिए यह अलग-अलग तरीकों से किया जाता है, जो इस बात पर निर्भर करता है कि आप ट्विटर बूटस्ट्रैप संस्करण 2 और निम्न या संस्करण 3 का उपयोग कर रहे हैं:

बूटस्ट्रैप ३

संस्करण 3 में कैरेट को हटाने के लिए आपको बस HTML निकालने की आवश्यकता है <b class="caret"></b>.dropdown-toggle एंकर तत्व से :

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <-- remove this line
</a>

बूटस्ट्रैप 2 और निचला

संस्करण 2 में कैरेट को हटाने के लिए आपको सीएसएस में थोड़ी अधिक जानकारी की आवश्यकता है और मैं सुझाव देता हूं कि कैसे देखें :after छद्म तत्व अधिक विस्तार काम करता है। आपको ट्विटर बूटस्ट्रैप उदाहरण में तीर को लक्षित करने और हटाने के लिए समझने के अपने तरीके से शुरू करने के लिए, आप निम्नलिखित सीएसएस चयनकर्ता और कोड का उपयोग करेंगे:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

यह आपके पक्ष में काम करेगा यदि आप आगे देखते हैं कि ये कैसे काम करते हैं और न केवल उन उत्तरों का उपयोग करें जो मैंने आपको दिए हैं।

@CocaAkat को इंगित करने के लिए धन्यवाद कि हम मूल मेनू पर दिखाए जा रहे उप मेनू को रोकने के लिए ">" चाइल्ड कॉम्बिनेटर को याद कर रहे थे

— मेरे सर में दर्द है
स्रोत
79
भी जोड़ना था margin: 0;, अन्यथा ऊपर 1px मार्जिन .dropdown-menuछोटी गाड़ी व्यवहार का कारण बनता है।
— सलमान वॉन अब्बास
12
सरल समाधान, लेकिन मूल लिंक अभी भी क्लिक करने योग्य नहीं है। मैं मूल विषय के साथ नवीनतम बूटस्ट्रैप का उपयोग कर रहा हूं।
— क्रुणाल
5
नोट: हां यह करता है - यह किसी भी ब्राउज़र में काम करेगा जो ट्विटर बूटस्ट्रैप का समर्थन करता है। @GeorgeEdison यह बेसिक CSS है - IE8 किस भाग से समर्थित नहीं होगा? यदि आपको समस्या हो रही है, तो एक प्रश्न पोस्ट करें, भ्रामक टिप्पणियां नहीं।
— मेरा सिर
3
@ मायहेड हर्ट्स: कुछ और शोधों के बाद - पता चला कि यह वास्तव में एक बूटस्ट्रैप बग था और यह केवल पांच दिन पहले तय किया गया था।
— नाथन उस्मान
5
@Krunal लिंक पर क्लिक करने में सक्षम होने के लिए, आपको data-toggle="dropdown"विशेषता को निकालना होगा ।
— फेरामासन 21
230

"माई हेड हर्ट्स" (जो बहुत अच्छा था) से जवाब के अलावा:

ul.nav li.dropdown:hover ul.dropdown-menu{
    display: block;    
}

2 सुस्त मुद्दे हैं:

  1. ड्रॉपडाउन लिंक पर क्लिक करने पर ड्रॉपडाउन-मेन्यू खुलेगा। और यह तब तक खुला रहेगा जब तक कि उपयोगकर्ता कहीं और क्लिक नहीं करता है, या इसके ऊपर वापस नहीं जाता है, जिससे एक अजीब यूआई बनता है।
  2. ड्रॉपडाउन लिंक और ड्रॉपडाउन-मेनू के बीच 1px का अंतर है। यदि आप ड्रॉपडाउन और ड्रॉपडाउन-मेनू के बीच धीरे-धीरे चलते हैं, तो यह ड्रॉपडाउन-मेनू छिप जाता है।

(1) का समाधान "लिंक" और "डेटा-टॉगल" तत्वों को नौसेना लिंक से हटा रहा है

<a href="#">
     Dropdown
     <b class="caret"></b>
</a>

यह आपको अपने मूल पृष्ठ का लिंक बनाने की क्षमता भी देता है - जो कि डिफ़ॉल्ट कार्यान्वयन के साथ संभव नहीं था। आप "#" को केवल उस पेज से बदल सकते हैं, जिसे आप उपयोगकर्ता को भेजना चाहते हैं।

(2) का समाधान .drop-menu चयनकर्ता पर मार्जिन-टॉप निकाल रहा है

.navbar .dropdown-menu {
    margin-top: 0px;
}
— कोरी मूल्य
स्रोत
15
जानबूझकर क्लिक को ठीक करने के लिए, मैंने सिर्फ data-toggle="dropdown"विशेषता को हटा दिया , जो काम करने के लिए लग रहा था।
— एंथनी ब्रिग्स
5
समाधान (2) नेवी-पिल बटन के लिए:.nav-pills .dropdown-menu { margin-top: 0px; }
— लोरेन
1
इस समस्या को ठीक करने के लिए, जो मैंने ऊपर ली है। विवरण: hover> ul.dropdown-menu
— आर्किमिडीज़
12
"लिंक" और "डेटा-टॉगल" को हटाए जाने की विशेषता, नौसिखिया लिंक से यह मोबाइल और टैबलेट में ठीक काम करना बंद कर देती है :(
— मोसिजवा
1
यदि आपने डेटा-टॉगल = "ड्रॉपडाउन" विशेषता को हटा दिया है, तो आप कीबोर्ड का उपयोग करके ड्रॉप डाउन मेनू का विस्तार नहीं कर पाएंगे। तो यह 508 अनुपालन नहीं होगा। आप क्लिक को कैसे अक्षम कर सकते हैं लेकिन कीबोर्ड की कार्यक्षमता को बनाए रख सकते हैं?
— duyn9uyen
130

मैंने jQuery का थोड़ा उपयोग किया है:

// Add hover effect to menus
jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});
— जॉन मोंटगोमरी
स्रोत
13
इस प्रकार सं। वैसे भी JQuery का उपयोग बूटस्ट्रैप सामान के साथ किया जाता है और फिर भी टचस्क्रीन उपकरणों में डिफ़ॉल्ट 'क्लिक' कार्यक्षमता के लिए अनुमति देता है।
— को कस्टर्ड में बतख
इसका इस्तेमाल किया। मुझे लगता है कि यह अभी भी क्लिक कार्यक्षमता के साथ-साथ मोबाइलों के लिए भी अनुमति देता है, लेकिन डेस्कटॉप के लिए हॉवर एकदम सही है।
— स्टुअर्ट
1
मैंने इसका उपयोग किया, लेकिन इसे ड्रॉपडाउन के लिए भी उपयोग करने योग्य बनाया, जो एक नौसेना में नहीं हैं। मैं btn-group div में वर्ग ड्रॉपडाउन-होवर जोड़ता हूं और इस jQuery खोजक $ ('ul.nav li.dropdown, .dropdown-hover') का उपयोग करता हूं। hover (फ़ंक्शन () {.धन्यवाद!
— Brandon
यह एक अच्छा और छोटा है। सीएसएस संस्करण ने सबमेनू को प्रदर्शित होने की अनुमति नहीं दी, और 200ms बहुत जल्दी थे इसलिए मैंने इसे बदल दिया $('ul.nav li.dropdown').hover(function() { $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(); }, function() { $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut().hover(function() { $(this).stop(true, true); }); });: जब सबमेनू होवर स्टॉप फेडेड होता है
— डेमियन
इस jqLite साथ काम है कि anguraljs के साथ शामिल है प्रतीत नहीं होता है
— nuander
70

यहाँ वास्तव में बहुत सारे अच्छे समाधान हैं। लेकिन मुझे लगा कि मैं आगे बढ़ूंगा और दूसरे विकल्प के रूप में मुझे यहां लाऊंगा। यह सिर्फ एक साधारण jQuery स्निपेट है जो इसे बूटस्ट्रैप करता है अगर यह सिर्फ क्लिक के बजाय ड्रॉपडाउन के लिए हॉवर का समर्थन करता है। मैंने केवल संस्करण 3 के साथ इसका परीक्षण किया है इसलिए मुझे नहीं पता कि यह संस्करण 2 के साथ काम करेगा। इसे अपने संपादक में स्निपेट के रूप में सहेजें और इसे एक कुंजी के स्ट्रोक पर रखें।

<script>
    $(function() {
        $(".dropdown").hover(
            function(){ $(this).addClass('open') },
            function(){ $(this).removeClass('open') }
        );
    });
</script>

मूल रूप से, यह केवल यह कह रहा है कि जब आप ड्रॉपडाउन क्लास में होवर करेंगे, तो यह ओपन क्लास को इसमें जोड़ेगा। तब यह सिर्फ काम करता है। जब आप ड्रॉपडाउन क्लास या बच्चे उल / ली के साथ माता-पिता ली पर मंडराना बंद कर देते हैं, तो यह ओपन क्लास को हटा देता है। जाहिर है, यह केवल कई समाधानों में से एक है, और आप इसे .dropdown के केवल विशिष्ट उदाहरणों पर काम करने के लिए जोड़ सकते हैं। या तो माता-पिता या बच्चे के लिए एक संक्रमण जोड़ें।

— stereoscience
स्रोत
2
महान समाधान! मैंने लिंक को क्लिक करने योग्य बनाने के लिए लिंक से डेटा-टॉगल = "ड्रॉपडाउन" विशेषता को भी हटा दिया।
— सर्गेई
यह एक अच्छा टिप सेर्गेई है। मैं हमेशा सुनिश्चित करता हूं कि शीर्ष लिंक कहीं नहीं जाए ताकि यह टैबलेट और फोन पर भी काम करे।
— स्थैतिकता
1
@ सेरी मैं ऐसा करने की सलाह नहीं दूंगा। आप मोबाइल उपयोगकर्ताओं के लिए कार्यक्षमता तोड़ देंगे। वे एक मेनू खोलने के लिए हॉवर फ़ंक्शन का उपयोग नहीं कर सकते हैं और इसे क्लिक करने में सक्षम होने की आवश्यकता है।
— पॉल
2
टचस्क्रीन के साथ पीछे-संगत होने के दौरान यह आश्चर्यजनक रूप से छोटा और आसान है। बहुत अधिक उत्कीर्ण किया जाना चाहिए।
— अधिकतम
यह वास्तव में अच्छा लग रहा है। किसी भी विचार कैसे सीएसएस संक्रमण का उपयोग कर एनीमेशन का एक सा जोड़ने के लिए?
— फ्रेड रोचा
69

बस कोड की तीन पंक्तियों में अपनी सीएसएस शैली को अनुकूलित करें

.dropdown:hover .dropdown-menu {
   display: block;
}
— रंजीत
स्रोत
22

यदि आपके पास dropdownइस तरह के वर्ग के साथ एक तत्व है (उदाहरण के लिए):

<ul class="list-unstyled list-inline">
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-bars"></i> Dropdown 1</a>
        <ul class="dropdown-menu">
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
            <li><a href="">Item 4</a></li>
            <li><a href="">Item 5</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-user"></i> Dropdown 2</a>
        <ul class="dropdown-menu">
            <li><a href="">Item A</a></li>
            <li><a href="">Item B</a></li>
            <li><a href="">Item C</a></li>
            <li><a href="">Item D</a></li>
            <li><a href="">Item E</a></li>
        </ul>
    </li>
</ul>

फिर आप jQuery कोड के इस स्निपेट का उपयोग करके, इसके शीर्षक पर क्लिक करने के बजाय, ड्रॉपडाउन मेनू को अपने आप होवर पर गिरा सकते हैं:

<script>
    $('.dropdown').hover(
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
        },
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
        }
    );

    $('.dropdown-menu').hover(
        function() {
            $(this).stop(true, true);
        },
        function() {
            $(this).stop(true, true).delay(200).fadeOut();
        }
    );
</script>

यहाँ एक डेमो है

यह उत्तर @Michael के उत्तर पर निर्भर करता है , मैंने कुछ बदलाव किए हैं और ड्रॉपडाउन मेनू को ठीक से काम करने के लिए कुछ अतिरिक्त जोड़े हैं

— अम्र
स्रोत
उत्तम। बहुत बहुत धन्यवाद।
— एंटीकबड
20

[अद्यतन] प्लगइन GitHub पर है और मैं कुछ सुधारों पर काम कर रहा हूं (जैसे केवल डेटा-विशेषताओं के साथ उपयोग (कोई JS आवश्यक)। मैं नीचे कोड छोड़ रहा हूं, लेकिन यह GitHub पर जैसा है वैसा नहीं है।

मुझे विशुद्ध रूप से CSS संस्करण पसंद आया, लेकिन इसके बंद होने से पहले देरी होना अच्छा है, क्योंकि यह आमतौर पर एक बेहतर उपयोगकर्ता अनुभव होता है (यानी माउस पर्ची के लिए दंडित नहीं किया जाता है जो ड्रॉपडाउन के बाहर 1 px जाता है, आदि), और जैसा कि टिप्पणियों में उल्लेख किया गया है। , वहाँ है कि मार्जिन के 1px आप के साथ या कभी कभी अप्रत्याशित रूप से बंद हो जाता है जब आप मूल बटन से ड्रॉपडाउन में जा रहे हैं, आदि।

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

जे एस

// outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();

// if instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function(options) {

    // the element we really care about
    // is the dropdown-toggle's parent
    $allDropdowns = $allDropdowns.add(this.parent());

    return this.each(function() {
        var $this = $(this).parent(),
            defaults = {
                delay: 500,
                instantlyCloseOthers: true
            },
            data = {
                delay: $(this).data('delay'),
                instantlyCloseOthers: $(this).data('close-others')
            },
            options = $.extend(true, {}, defaults, options, data),
            timeout;

        $this.hover(function() {
            if(options.instantlyCloseOthers === true)
                $allDropdowns.removeClass('open');

            window.clearTimeout(timeout);
            $(this).addClass('open');
        }, function() {
            timeout = window.setTimeout(function() {
                $this.removeClass('open');
            }, options.delay);
        });
    });
};

delayपैरामीटर सुंदर आत्म व्याख्यात्मक है, औरinstantlyCloseOthers होगा तुरन्त पास अन्य सभी ड्रॉपडाउन कि खुला जब आप मंडराना एक नया एक से अधिक कर रहे हैं।

शुद्ध सीएसएस नहीं, लेकिन उम्मीद है कि इस देरी के घंटे (यानी यह एक पुराना धागा है) में किसी और की मदद करेगा।

यदि आप चाहें, तो आप विभिन्न प्रक्रियाओं को देख सकते हैं, #concrete5जिनसे मैं ( आईआरसी पर चर्चा में ) इस गैस्ट में विभिन्न चरणों के माध्यम से काम कर सकता हूं : https://gist.github.com/3876924

अलग-अलग टाइमर आदि का समर्थन करने के लिए प्लगइन पैटर्न दृष्टिकोण बहुत साफ है।

अधिक के लिए ब्लॉग पोस्ट देखें ।

— CWSpear
स्रोत
15

यह बूटस्ट्रैप 3 में बनाया गया है। बस इसे अपने सीएसएस में जोड़ें:

.dropdown:hover .dropdown-menu {
    display: block;
}
— BSUK
स्रोत
10

JQuery के साथ और भी बेहतर:

jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).show();
  jQuery(this).addClass('open');
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).hide();
  jQuery(this).removeClass('open');
});
— caarlos0
स्रोत
3
मैंने आपका कोड बदल दिया है jQuery('ul.nav li.dropdown').hover(function() { jQuery(this).closest('.dropdown-menu').stop(true, true).show(); jQuery(this).addClass('open'); }, function() { jQuery(this).closest('.dropdown-menu').stop(true, true).hide(); jQuery(this).removeClass('open'); });इसलिए सबमेनू को होवर पर प्रदर्शित नहीं किया जाएगा।
— फरजम
यह कोड अब नवीनतम रिलीज़ के साथ काम नहीं करेगा।
— पॉल
9

$().dropdown('toggle')होवर पर ड्रॉपडाउन मेनू को टॉगल करने के लिए आप डिफ़ॉल्ट विधि का उपयोग कर सकते हैं

$(".nav .dropdown").hover(function() {
  $(this).find(".dropdown-toggle").dropdown("toggle");
});
— sdvnksv
स्रोत
8

मेरी राय में सबसे अच्छा तरीका इस तरह है:

;(function($, window, undefined) {
    // Outside the scope of the jQuery plugin to
    // keep track of all dropdowns
    var $allDropdowns = $();

    // If instantlyCloseOthers is true, then it will instantly
    // shut other nav items when a new one is hovered over
    $.fn.dropdownHover = function(options) {

        // The element we really care about
        // is the dropdown-toggle's parent
        $allDropdowns = $allDropdowns.add(this.parent());

        return this.each(function() {
            var $this = $(this),
                $parent = $this.parent(),
                defaults = {
                    delay: 500,
                    instantlyCloseOthers: true
                },
                data = {
                    delay: $(this).data('delay'),
                    instantlyCloseOthers: $(this).data('close-others')
                },
                settings = $.extend(true, {}, defaults, options, data),
                timeout;

            $parent.hover(function(event) {

                // So a neighbor can't open the dropdown
                if(!$parent.hasClass('open') && !$this.is(event.target)) {
                    return true;
                }

                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $parent.addClass('open');
            }, function() {
                timeout = window.setTimeout(function() {
                    $parent.removeClass('open');
                }, settings.delay);
            });

            // This helps with button groups!
            $this.hover(function() {
                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $parent.addClass('open');
            });

            // Handle submenus
            $parent.find('.dropdown-submenu').each(function(){
                var $this = $(this);
                var subTimeout;
                $this.hover(function() {
                    window.clearTimeout(subTimeout);
                    $this.children('.dropdown-menu').show();

                    // Always close submenu siblings instantly
                    $this.siblings().children('.dropdown-menu').hide();
                }, function() {
                    var $submenu = $this.children('.dropdown-menu');
                    subTimeout = window.setTimeout(function() {
                        $submenu.hide();
                    }, settings.delay);
                });
            });
        });
    };

    $(document).ready(function() {
        // apply dropdownHover to all elements with the data-hover="dropdown" attribute
        $('[data-hover="dropdown"]').dropdownHover();
    });
})(jQuery, this);

नमूना मार्कअप:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
        Account <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">My Account</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Change Email</a></li>
        <li><a tabindex="-1" href="#">Change Password</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Logout</a></li>
    </ul>
</li>
— एलेक्स
स्रोत
5
यह कैमरून स्पीयर का काम है, मुझे लगा कि मैं उसे चिल्लाऊँगा
— blog
8

इसे करने का सबसे अच्छा तरीका सिर्फ बूटस्ट्रैप के क्लिक इवेंट को एक होवर के साथ ट्रिगर करना है। इस तरह, यह अभी भी टच डिवाइस के अनुकूल रहना चाहिए।

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});
— मार्क विलियम्स
स्रोत
अवांछित परिणाम: माउसिन, क्लिक और माउसआउट मेनू को खुला छोड़ देगा। यह नहीं है कि मैं क्या चाहते हैं ...
— Wietse
इसका उपयोग करते हुए, यह ड्रॉपडाउन खोलने के लिए बूटस्ट्रैप फ़ंक्शन को चलाता है, यह फ़ंक्शन कई अन्य चीजें करता है, जैसे कि एरिया-विस्तारित = "सच"
— फरहद सखाई
8

बस जोड़ना चाहते हैं, कि अगर आपके पास कई ड्रॉपडाउन हैं (जैसा कि मैं करता हूं) आपको लिखना चाहिए:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

और यह ठीक से काम करेगा।

— मैक्सिम फिलिप्पोव
स्रोत
मेरे .dropdown-मेनू का margin: 2px 0 0;मतलब था कि समय से पहले मेनू को ऊपर से एक धीमी गति से माउसएंटर करना। ul.dropdown-menu{ margin-top: 0; }
— एलेस्टेयर
7

मैंने इसे इस प्रकार प्रबंधित किया है: 

$('ul.nav li.dropdown').hover(function(){
       $(this).children('ul.dropdown-menu').slideDown(); 
    }, function(){
       $(this).children('ul.dropdown-menu').slideUp(); 
});

मुझे उम्मीद है इससे किसी को सहायता मिलेगी...

— मेहदी मघरोनी
स्रोत
5

जोड़ा गया मार्जिन-टॉप: 0। बूस्टपैड-सीएसएस मार्जिन को .dddown-मेनू के लिए रीसेट करने के लिए ताकि उपयोगकर्ता द्वारा धीरे-धीरे मेनू सूची में ड्रॉप डाउन मेनू से होवर करते समय मेनू सूची को गायब न किया जाए।

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

.nav .dropdown-menu {
    margin-top: 0;
}
— Sudharshan
स्रोत
2
यह सही उत्तर है, बूटस्ट्रैप ड्रॉपडाउन पर मंडराने के लिए तैयार है, अगर माउस ड्रॉपडाउन मेनू के बाहर नहीं जाता है। मार्जिन-टॉप को हटाने से मेनू के लिंक से मेनू तक जाने की अनुमति मिलती है और इसलिए मेनू के ऑटो-क्लोज़ के बिना। और यह समाधान स्पर्श उपकरणों के लिए सही व्यवहार रखने की अनुमति देता है
— निकोलस जेनेल
5

यह शायद एक बेवकूफी भरा विचार है, लेकिन नीचे इंगित करने वाले तीर को निकालने के लिए, आप हटा सकते हैं

<b class="caret"></b>

यह ऊपर इंगित करने के लिए कुछ नहीं करता है, हालांकि ...

— stinaq
स्रोत
5

मैंने बूटस्ट्रैप 3 ड्रॉपडाउन होवर कार्यक्षमता के लिए एक उचित प्लगइन प्रकाशित किया है , जिसमें आप यह भी परिभाषित कर सकते हैं कि dropdown-toggleतत्व पर क्लिक करते समय क्या होता है (क्लिक को अक्षम किया जा सकता है):

https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover

जब मैंने पहले ही कई समाधान किए हैं तो मैंने इसे क्यों बनाया है?

मेरे पास पहले से मौजूद सभी समाधानों के साथ समस्या थी। साधारण सीएसएस वाले .openवर्ग का उपयोग नहीं कर रहे हैं .dropdown, इसलिए ड्रॉप-डाउन टॉगल तत्व पर कोई प्रतिक्रिया नहीं होगी जब ड्रॉप-डाउन दिखाई देता है।

Js वाले क्लिक करने में हस्तक्षेप कर रहे हैं .dropdown-toggle, इसलिए ड्रॉपडाउन होवर पर दिखाई देता है, फिर इसे एक खुली हुई ड्रॉप-डाउन पर क्लिक करने पर छुपाता है, और माउस को हटाकर फिर से दिखाने के लिए ड्रॉप-डाउन को ट्रिगर करेगा। कुछ js समाधान iOS संगतता को तोड़ रहे हैं, कुछ प्लगइन्स आधुनिक डेस्कटॉप ब्राउज़र पर काम नहीं कर रहे हैं जो स्पर्श घटनाओं का समर्थन कर रहे हैं।

इसलिए मैंने बूटस्ट्रैप ड्रॉपडाउन होवर प्लगइन बनाया जो बिना किसी हैक के केवल मानक बूटस्ट्रैप जावास्क्रिप्ट एपीआई का उपयोग करके इन सभी मुद्दों को रोकता है । यहां तक ​​कि Aria विशेषताएँ इस प्लगइन के साथ ठीक काम कर रही हैं।

— इस्तवान उज्ज-मेज़रोस
स्रोत
Github.com/vadikom/smartmenus के बारे में आपकी क्या राय है ? मैं तय नहीं कर सकता, दोनों पुस्तकालय वास्तव में अच्छे लग रहे हैं।
— Csaba Toth
2
स्मार्टमेनस वास्तव में अच्छा दिखता है, यह मेनू के लिए बेहतर हो सकता है। मेरा प्लगइन बूटस्ट्रैप ड्रॉपडाउन के लिए एक छोटा सा अतिरिक्त है, यह होवर पर ड्रॉपडाउन को खोलने से ज्यादा नहीं है, जबकि स्मार्टमेनू सबमेनस का समर्थन करता है, और कुछ अन्य फैंसी चीजें करता है।
— इस्तवान उज्ज-मेज़रोस
1
धन्यवाद। मैं देख रहा हूं कि स्मार्टमेनू का कोड बहुत व्यापक है और बहुत सीएसएस भी है। अब तक मैं साथ गया था bootstrap-dropdown-hover, क्योंकि यह काम और अधिक कॉम्पैक्ट लगता है। मैं बाईं ओर नावबार के साथ एक लैंडिंग साइट बना रहा हूं।
— सेसाबा टोथ
4

इस कोड का उपयोग माउसओवर (केवल डेस्कटॉप) पर सबमेनू खोलने के लिए करें:

$('ul.nav li.dropdown').hover(function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').show();
    }
}, function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').hide().css('display','');
    }
});

और यदि आप चाहते हैं कि प्रथम स्तर का मेनू क्लिक करने योग्य हो, तो भी मोबाइल पर इसे जोड़ें:

    $('.dropdown-toggle').click(function() {
    if ($(this).next('.dropdown-menu').is(':visible')) {
        window.location = $(this).attr('href');
    }
});

सबमेनू (ड्रॉपडाउन-मेनू) डेस्कटॉप पर माउसओवर के साथ खोला जाएगा, और मोबाइल और टैबलेट पर क्लिक / टच के साथ। एक बार सबमेनू ओपन होने के बाद, एक दूसरा क्लिक आपको लिंक खोलने देगा। इसके लिए धन्यवाद if ($(window).width() > 767), सबमेनू मोबाइल पर पूरी स्क्रीन की चौड़ाई लेगा।

— Jibato
स्रोत
मैं आपके कोड का उपयोग करना चाहूंगा, लेकिन मुझे इसे ठीक से काम करने में परेशानी हो रही है। सबसे पहले, मोबाइल के लिए होवर () कैसे निकालें और केवल डेस्कटॉप के लिए इसका उपयोग करें? जब मैं आपके कोड का उपयोग करता हूं, और विंडो को मोबाइल से आकार देता हूं, तो मुझे हॉवर () और क्लिक () कार्यक्षमता दोनों मिलती हैं। लेकिन इससे भी ज्यादा अजीब ... यह है कि जब मैं ब्राउज़र को रीफ्रेश करूंगा तो यह व्यवहार बंद हो जाएगा, हा! क्या आप मुझे बता सकते हैं कि इसे कैसे ठीक किया जाए? मुझे मोबाइल पर सबमेनस दिखाने के लिए डेस्कटॉप सबमेनस की जरूरत है और क्लिक करें () मोबाइल पर सबमेनस दिखाने के लिए विंडो को ठीक से काम करने के लिए भी ब्राउजर को रिफ्रेश किए बिना। मुझे आशा है कि यह स्पष्ट है
— क्रिस 22
ठीक है, यह समझ में आता है और मैं आपके समाधान को आपके सुझाए तरीके से चलाने की कोशिश करूंगा। धन्यवाद!
— 13:22 पर क्रिस 22
इस बेहतरीन विधि का प्रयोग करें: @ फाल्टर
— फरहद सखाई
3

यह अप को छिपाएगा

.navbar .dropdown-menu:before {
   display:none;
}
.navbar .dropdown-menu:after {
   display:none;
}
— allochi
स्रोत
3

यह ड्रॉप डाउन और उनकी देखभाल को छिपाना चाहिए यदि वे एक टैबलेट से छोटे हैं।

@media (max-width: 768px) {
    .navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
        display: none;
    }
}
— केविन नुट
स्रोत
आप इसे क्यों छिपाना चाहेंगे? अब मोबाइल उपयोगकर्ताओं के पास सबमेनू में लिंक को एक्सेस करने का कोई तरीका नहीं है। मोबाइल डिवाइस पर होवर प्रभाव को बंद करना बेहतर है और ड्रॉपडाउन मेनू को बरकरार रखना है। इस तरह वे उस पर क्लिक करके इसे खोल सकते हैं।
— पॉल
3

JQuery का समाधान अच्छा है, लेकिन इसके लिए क्लिक इवेंट (मोबाइल या टैबलेट के लिए) के साथ सौदा करने की आवश्यकता होगी क्योंकि होवर ठीक से काम नहीं करेगा ... शायद कुछ विंडो री-साइज़ का पता लगा सके?

एंड्रेस इलिच का जवाब अच्छी तरह से काम करता है, लेकिन इसे मीडिया क्वेरी में लपेटा जाना चाहिए:

@media (min-width: 980px) {

    .dropdown-menu .sub-menu {
        left: 100%;
        position: absolute;
        top: 0;
        visibility: hidden;
        margin-top: -1px;
    }

    .dropdown-menu li:hover .sub-menu {
        visibility: visible;
    }

    .dropdown:hover .dropdown-menu {
        display: block;
    }

    .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
        margin-top: 0;
    }

    .navbar .sub-menu:before {
        border-bottom: 7px solid transparent;
        border-left: none;
        border-right: 7px solid rgba(0, 0, 0, 0.2);
        border-top: 7px solid transparent;
        left: -7px;
        top: 10px;
    }
    .navbar .sub-menu:after {
        border-top: 6px solid transparent;
        border-left: none;
        border-right: 6px solid #fff;
        border-bottom: 6px solid transparent;
        left: 10px;
        top: 11px;
        left: -6px;
    }
}
— Fizex
स्रोत
3

संस्करण 2 के लिए बहुत ही सरल समाधान, केवल सीएसएस। मोबाइल और टैबलेट के लिए समान अनुकूल कार्यक्षमता रखता है।

@media (min-width: 980px) {
    .dropdown:hover .dropdown-menu {
       display: block;
    }
}
— काश
स्रोत
यह कुछ विषयों के लिए बहुत अच्छा नहीं है जहाँ मेनू आइटम और ड्रॉपडाउन के बीच एक अंतर है। माउस इस गैप में जाने पर मेनू गायब हो जाएगा।
— ndbroadbent
2

इस स्क्रिप्ट के साथ bootstrap.js को अधिलेखित करें।

jQuery(document).ready(function ($) {
$('.navbar .dropdown').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

$('.dropdown-submenu').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

});
— हरि कृष्णन
स्रोत
2

यहां मेरी तकनीक है जो मेनू या टॉगल बटन पर मंडराने से रोकने के बाद मेनू बंद होने से पहले थोड़ी सी देरी करता है। <button>आप सामान्य रूप से प्रदर्शित करने के लिए एनएवी मेनू है क्लिक करेंगे कि #nav_dropdown।

$(function() {
  var delay_close_it, nav_menu_timeout, open_it;
  nav_menu_timeout = void 0;
  open_it = function() {
    if (nav_menu_timeout) {
      clearTimeout(nav_menu_timeout);
      nav_menu_timeout = null;
    }
    return $('.navbar .dropdown').addClass('open');
  };
  delay_close_it = function() {
    var close_it;
    close_it = function() {
      return $('.navbar .dropdown').removeClass('open');
    };
    return nav_menu_timeout = setTimeout(close_it, 500);
  };
  $('body').on('mouseover', '#nav_dropdown, #nav_dropdown *', open_it).on('mouseout', '#nav_dropdown', delay_close_it);
  return $('body').on('mouseover', '.navbar .dropdown .dropdown-menu', open_it).on('mouseout', '.navbar .dropdown .dropdown-menu', delay_close_it);
});
— सारा वेसल्स
स्रोत
2

सुदर्शन के उत्तर को बढ़ाने के लिए , मैं इसे मीडिया क्वैश्चन में लपेटता हूं जब होवर को रोकने के लिए XS डिस्प्ले की चौड़ाई ...

@media (min-width:768px)
{
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;    
    }

    .nav .dropdown-menu {
        margin-top: 0;
    }
}

इसके अलावा मार्कअप में कैरेट की आवश्यकता नहीं है, बस ली के लिए ड्रॉपडाउन क्लास ।

— Johna
स्रोत
2

यह वर्डप्रेस बूटस्ट्रैप के लिए काम करता है:

.navbar .nav > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu:before {
    content: none;
}
— फ्रेड के
स्रोत
2

तो आपके पास यह कोड है:

<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>

<ul class="dropdown-menu" role="menu">
    <li>Link 1</li>
    <li>Link 2</li> 
    <li>Link 3</li>                                             
</ul>

आम तौर पर यह एक क्लिक ईवेंट पर काम करता है, और आप चाहते हैं कि यह एक हॉवर ईवेंट पर काम करे। यह बहुत सरल है, बस इस जावास्क्रिप्ट / jQuery कोड का उपयोग करें:

$(document).ready(function () {
    $('.dropdown-toggle').mouseover(function() {
        $('.dropdown-menu').show();
    })

    $('.dropdown-toggle').mouseout(function() {
        t = setTimeout(function() {
            $('.dropdown-menu').hide();
        }, 100);

        $('.dropdown-menu').on('mouseenter', function() {
            $('.dropdown-menu').show();
            clearTimeout(t);
        }).on('mouseleave', function() {
            $('.dropdown-menu').hide();
        })
    })
})

यह बहुत अच्छी तरह से काम करता है और यहाँ स्पष्टीकरण है: हमारे पास एक बटन है, और एक मेनू है। जब हम बटन दबाते हैं तो हम मेनू को प्रदर्शित करते हैं, और जब हम बटन को दबाते हैं तो हम मेनू को 100 एमएस के बाद छिपाते हैं। यदि आपको आश्चर्य है कि मैं इसका उपयोग क्यों कर रहा हूं, तो इसलिए कि आपको मेनू पर बटन से कर्सर को खींचने के लिए समय चाहिए। जब आप मेनू पर होते हैं, तो समय रीसेट हो जाता है और आप जितनी बार चाहें वहां रह सकते हैं। जब आप मेनू से बाहर निकलते हैं, तो हम बिना किसी टाइमआउट के तुरंत मेनू को छिपा देंगे।

मैंने कई परियोजनाओं में इस कोड का उपयोग किया है, अगर आपको इसका उपयोग करने में कोई समस्या आती है, तो मुझसे प्रश्न पूछने में संकोच न करें।

— क्रिसन रालुका तियोदोरा
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.