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




drop-down-menu twitter-bootstrap (24)

.dropdown-menu के लिए बूटस्ट्रैप सीएसएस मार्जिन को रीसेट करने के लिए मार्जिन-टॉप भी जोड़ा गया है, इसलिए मेनू सूची ड्रॉप डाउन मेनू से मेन्यू सूची में धीरे-धीरे हो जाने पर मेनू सूची गायब नहीं होती है।

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

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

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


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

@media (max-width: 768px) {
    .navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
        display: none;
    }
}

यदि आपके पास इस तरह की 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>

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

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


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

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

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

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

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

यही कारण है कि मैंने github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover प्लगइन github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover जो बिना किसी हैक के मानक बूटस्ट्रैप जावास्क्रिप्ट एपीआई का उपयोग कर इन सभी मुद्दों को रोकता है। यहां तक ​​कि Aria विशेषताओं को भी इस प्लगइन के साथ ठीक काम कर रहे हैं।


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

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

यह ऊपर की ओर इशारा करते हुए कुछ भी नहीं करता है, यद्यपि ...


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

<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 एमएस के बाद मेनू छुपाते हैं। यदि आपको आश्चर्य है कि मैं इसका उपयोग क्यों करता हूं, ऐसा इसलिए है क्योंकि आपको कर्सर को मेनू पर बटन से खींचने के लिए समय चाहिए। When you are on the menu, the time is reset and you can stay there as many time as you want. When you exit the menu, we will hide the menu instantly without any timeout.

I've used this code in many projects, if you encounter any problem using it, feel free to ask me questions.


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

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

2 समस्याएं हैं:

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

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

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

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

(2) का समाधान .dropdown-menu selector पर मार्जिन-टॉप को हटा रहा है

.navbar .dropdown-menu {
 margin-top: 0px;
}

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

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

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


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

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});

इस स्क्रिप्ट के साथ 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') })
});

}); 

मैंने नवीनतम (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>

Demo


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

$('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) के लिए धन्यवाद, सबमेनू मोबाइल पर पूर्ण स्क्रीन चौड़ाई लेगा।


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

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

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


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

$(".nav .dropdown").hover(function() {
  $(this).find(".dropdown-toggle").dropdown("toggle");
});

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');
});

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

;(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>

यहां मेरी तकनीक है जो मेनू या टॉगल बटन पर होवर करना बंद करने के बाद मेनू बंद होने से पहले थोड़ी देर देरी जोड़ती है। <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);
});

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

मुझे पूरी तरह से सीएसएस संस्करण पसंद आया, लेकिन इसे बंद होने से पहले देरी हो रही है, क्योंकि यह आमतौर पर एक बेहतर उपयोगकर्ता अनुभव होता है (यानी माउस पर्ची के लिए दंडित नहीं किया जाता है जो ड्रॉपडाउन के बाहर 1 पीएक्स चला जाता है), और टिप्पणियों में उल्लिखित , जब आप मूल बटन से ड्रॉपडाउन पर जा रहे हैं तो उस 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 क्लोज़ऑथर्स अन्य सभी ड्रॉपडाउन को तुरंत बंद instantlyCloseOthers देंगे जो खुले होते हैं जब आप एक नए पर होवर करते हैं।

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

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

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

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


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

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

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;
    }
}

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

.navbar .nav > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu:before {
    content: none;
}

मैंने थोड़ी सी 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();
});

यह मेरे लिए काम किया:

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

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

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

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





twitter-bootstrap