হোভার সহ বুটস্ট্র্যাপ ড্রপডাউন


179

ঠিক আছে, সুতরাং আমার যা প্রয়োজন তা মোটামুটি সোজা is

আমি এতে কিছু ড্রপডাউন মেনু সহ একটি নভবার সেটআপ করেছি (ব্যবহার করে class="dropdown-toggle" data-toggle="dropdown"), এবং এটি দুর্দান্ত কাজ করে।

জিনিসটি এটি " onClick" কাজ করে , যখন আমি এটি পছন্দ করি " " পছন্দ করি onHover

এটি করার জন্য কোনও অন্তর্নির্মিত উপায় আছে?


আমার সদ্য প্রকাশিত যথাযথ প্লাগইনটি দেখুন যা নীচের সিএসএস এবং জেএস
István

উত্তর:


337

সবচেয়ে সহজ সমাধানটি সিএসএসে হবে। এর মতো কিছু যুক্ত করুন ...

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; // remove the gap so it doesn't close
 }

ওয়ার্কিং ফিডল


3
দীর্ঘ 'পূর্ণ-বিল্ট' সমাধানগুলির চেয়ে অনেক বেশি ভাল। কেবল এটি যোগ করুন এবং ডিফল্ট 'ক্লিক' ড্রপডাউন অতিরিক্ত পরিবর্তন ছাড়াই হোভারে কাজ করে।
আইয়ামফিজ

47
এটি সঙ্কুচিত মোবাইল মেনুতে নির্মিতর সাথে বিরোধ করবে, সুতরাং আপনার এটি একটি ব্রেক পয়েন্টে @ মিডিয়া (ন্যূন-প্রস্থ: 480px) মোড়ানো উচিত
বিলি শিহ

7
এছাড়াও লক্ষণীয়: আপনার যদি পিতা-সন্তানের সম্পর্কের সাথে ড্রপডাউন মেনু থাকে, উদাহরণস্বরূপ কোনও ওয়ার্ডপ্রেস থিমে, data-toggleপ্যারেন্ট আইটেমটিকে ক্লিকযোগ্য করতে আপনার বৈশিষ্ট্যটি সরিয়ে ফেলতে হবে ... কেবলমাত্র মোবাইলের পর্দায় জামানত ক্ষতির জন্য নজর রাখুন।
কেন যুবরাজ

2
ক্লিকে প্রদর্শনটি অক্ষম করে কীভাবে কেবল হোভার আচরণ রাখতে হয় তার কোনও সহজ উপায় আছে?
মাইক্র

1
@ মিশার, আমি সবেমাত্র একটি প্লাগইন প্রকাশ করেছি যাতে আপনি ক্লিক ইভেন্টটি অক্ষম করতে পারেন। প্লাগইনটি কোনও বুটস্ট্র্যাপ জাভাস্ক্রিপ্ট এপিআই ব্যবহার করে কোনও সিএসএস হ্যাক ছাড়াই কাজ করে, তাই এটি সমস্ত ডিভাইসের সাথে সামঞ্জস্যপূর্ণ: github.com/istvan-ujjmeszaros/bootstrap-roddown-hover
István

66

এটি করার সর্বোত্তম উপায় হ'ল কেবলমাত্র হোভারের সাহায্যে বুটস্ট্র্যাপ ক্লিক ইভেন্টকে ট্রিগার করা। এইভাবে, এটি এখনও স্পর্শ ডিভাইস বন্ধুত্বপূর্ণ থাকা উচিত

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

1
যদি আপনার একাধিক ড্রপডাউন স্তর থাকে তবে ব্যর্থ হয়
কনি ডিসিনকো

1
প্যারেন্ট লিঙ্কটি নিয়ে কাজ করছেন না
pio

ড্রপডাউন বন্ধ হয়ে গেলে অ্যাক্টিভ ক্লাসটি সরানোর কোনও উপায় আছে?
ব্রেইনভিশন

ড্রপডাউন উপাদান এবং মেনুগুলির মধ্যে একটি পিক্সেল ব্যবধান রয়েছে যা আপনি দ্রুত না হলে মেনুটিকে কিছুটা সময় অতিক্রম করে আড়াল করতে পারে
ম্যাট

1
একাধিক ড্রপডাউন ব্যবহার করে কিছু 'নিকটতম' ফিল্টারিং দরকার।
মাত্রই ভুল করে

56

আপনি jQuery এর হোভার ফাংশন ব্যবহার করতে পারেন।

আপনার শুধু ক্লাস যুক্ত করা দরকার openমাউস প্রবেশ এবং মাউস ড্রপডাউনটি ছাড়লে ক্লাসটি সরিয়ে ফেলতে হবে।

আমার কোডটি এখানে:

$(function(){
    $('.dropdown').hover(function() {
        $(this).addClass('open');
    },
    function() {
        $(this).removeClass('open');
    });
});

10
ওয়ে ভাল তবে গ্রহণযোগ্য উত্তর imho। এটি সমস্ত বুটস্ট্র্যাপ যুক্তিযুক্ত এবং স্টাইলিং অক্ষত রাখে। যদিও আমি দ্বিতীয় কলটি ফিরে ব্যবহার করার পরামর্শ দিয়েছিলাম এবং আপনি বোতামটি ক্লিক করার সময় কিছুটা জঘন্য আচরণ রোধ করার জন্য স্পষ্টভাবে অপসারণক্লাস এবং অ্যাডক্লাস ব্যবহার করবেন (যেখানে আপনি বোতামটি ছেড়ে দিলে এটি খুলবে এবং আপনি প্রবেশ করার সময় বন্ধ হবে)।
বাসটিয়ান লিন্ডারস 15:58

2
আমিও মনে করি এটি সেরা উত্তর। এটি বুটস্ট্র্যাপ 4 মেনুতে কাজ showকরার জন্য open, তার পরিবর্তে আমাকে ব্যবহার করতে হবে এবং এগুলি অন্তর্ভুক্ত করতে হবে dropdown-menu: $('.dropdown').hover(function() { $(this).addClass('show'); $(this).find('.dropdown-menu').addClass('show');}, function() {$(this).removeClass('show'); $(this).find('.dropdown-menu').removeClass('show');});(বিন্যাসের জন্য দুঃখিত))
রবিন জিম্মারম্যান

আপনার দুটি ড্রপডাউন মেনু আইটেম থাকলে কাজ করবেন না। যে কোনও ড্রপডাউন আইটেমের উপর হোভার করার সময় উভয়
সাবমেনাস

23

JQuery ব্যবহার করে একটি সহজ উপায় হ'ল:

$(document).ready(function(){
    $('ul.nav li.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
    });  
});

আমি মসৃণ রূপান্তরটি পছন্দ করি, তবে এটি কেবল প্রথম স্তরের পরিবর্তে সমস্ত স্তরের মেনু প্রসারিত করে expand আমি চাই না যে দ্বিতীয় স্তরের মেনুগুলি আমি তাদের পিতামাতাকে ঘুরিয়ে দেওয়া পর্যন্ত উপস্থিত হতে পারি।
কনি ডিসিনকো

1
শুধুমাত্র প্রথম স্তর পেতে, যোগ .first() - $(this).find('.dropdown-menu').first().stop(true, true).delay(200).fadeIn(200);...
JEdot

9

সিএসএসের জন্য এটি ক্রেজি হয়ে যায় যখন আপনি এটিতেও ক্লিক করেন। এই কোডটি আমি ব্যবহার করছি এটি মোবাইল দেখার জন্য কোনও পরিবর্তন করে না।

$('.dropdown').mouseenter(function(){
    if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
        if(!$(this).hasClass('open')) { // Keeps it open when hover it again
            $('.dropdown-toggle', this).trigger('click');
        }
    }
});

একটি সৌন্দর্য! TX! সিএসএস বিকল্পগুলি বুটস্ট্র্যাপ 3 এবং এর বাইরেও কাজ করবে না।
পেড্রো



5

সুতরাং আপনার এই কোডটি রয়েছে:

<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 মিমি পরে মেনুটি আড়াল করি। আপনি যদি ভাবছেন যে আমি কেন এটি ব্যবহার করি কারণ এটি আপনার মেনুর উপরের বোতাম থেকে কার্সারটি টেনে আনার জন্য সময় প্রয়োজন। আপনি যখন মেনুতে থাকবেন তখন সময়টি পুনরায় সেট হয়ে যায় এবং আপনি যত খুশি সেখানে থাকতে পারেন। আপনি মেনু থেকে প্রস্থান করার সময়, কোনও সময়সীমা ছাড়াই আমরা তাত্ক্ষণিকভাবে মেনুটি আড়াল করব।

আমি অনেক প্রকল্পে এই কোডটি ব্যবহার করেছি, যদি এটি ব্যবহার করে আপনার কোনও সমস্যা দেখা দেয় তবে নির্দ্বিধায় আমাকে প্রশ্ন জিজ্ঞাসা করুন।


বুটস্ট্র্যাপ ভি 3 এ এই কোডটিতে প্রচুর সমস্যা রয়েছে। ১) যদি একাধিক ড্রপডাউন থাকে তবে কোনও ড্রপ ডাউন থাকলে সমস্ত ড্রপডাউন প্রদর্শিত হয়। ২) ছোট স্ক্রিনে, হোভারিং অদ্ভুত উপায়ে ড্রপডাউনটি দেখায়।
কায়াকিনকডার

4

এটি আমি কিছু jQuery এর সাথে হোভারে ড্রপডাউন করতে ব্যবহার করি

$(document).ready(function () {
    $('.navbar-default .navbar-nav > li.dropdown').hover(function () {
        $('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
        $(this).addClass('open');
    }, function () {
        $('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
        $(this).removeClass('open');
    });
});

দুর্দান্ত তবে সাব মেনু সমর্থন করে না।
কনি ডিসিনকো

3

ফেডেইন ফেডআউট অ্যানিমেশন সহ হোভার ফাংশনটি ব্যবহার করে এটি ব্যবহার করে দেখুন

$('ul.nav li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});

এই অ্যানিমেশনটি 3 য় গভীরতায় কাজ করছে না তবে এটি 2 য় গভীরতায় কাজ করছে। 3 য় গভীরতার জন্য আপনার কি অন্য কোনও সমাধান রয়েছে?
জিলানী এ

দয়া করে রেফারেন্সের জন্য জেএসফিডেল যুক্ত করুন
রাকেশ

2

এটি আপনাকে বুটস্ট্র্যাপের জন্য নিজের হোভার ক্লাস করতে সহায়তা করবে:

সিএসএস:

/* Hover dropdown */
.hover_drop_down.input-group-btn ul.dropdown-menu{margin-top: 0px;}/*To avoid unwanted close*/
.hover_drop_down.btn-group ul.dropdown-menu{margin-top:2px;}/*To avoid unwanted close*/
.hover_drop_down:hover ul.dropdown-menu{
   display: block;
}

মার্জিনগুলি অযাচিত কাছাকাছি এড়াতে সেট করা আছে এবং সেগুলি optionচ্ছিক।

এইচটিএমএল:

<div class="btn-group hover_drop_down">
  <button type="button" class="btn btn-default" data-toggle="dropdown"></button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

আপনি যদি অনক্লিক ওপেনটি মুছে ফেলতে চান তবে বোতামটি অ্যাট্রিবিউট ডেটা-টগল = "ড্রপডাউন" মুছে ফেলতে ভুলবেন না এবং যখন ইনপুট ড্রপডাউন যুক্ত হয় তখন এটি কাজ করবে।


2

আপনি কেবল কোনও মোবাইল ডিভাইসে না থাকলে এটি কেবল নাবারকে ঘুরিয়ে দেয়, কারণ আমি দেখতে পেয়েছি যে নেভিগেশন ঘোরাফেরা মোবাইল বিভাজনগুলিতে ভাল কাজ করে না:

    $( document ).ready(function() {

    $( 'ul.nav li.dropdown' ).hover(function() {
        // you could also use this condition: $( window ).width() >= 768
        if ($('.navbar-toggle').css('display') === 'none' 
            && false === ('ontouchstart' in document)) {

            $( '.dropdown-toggle', this ).trigger( 'click' );
        }
    }, function() {
        if ($('.navbar-toggle').css('display') === 'none'
            && false === ('ontouchstart' in document)) {

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

});

আপনি এখানে আরও একটি ভাল সমাধান পেতে পারেন: github.com/CWSpear/bootstrap-hover-DPdown
সৌরবায়পাইলট

2

আমি অন্যান্য সমাধানগুলি চেষ্টা করে দেখছি, আমি বুটস্ট্র্যাপ 3 ব্যবহার করছি তবে ড্রপডাউন মেনু এটির উপরে যেতে খুব দ্রুত বন্ধ হয়

মনে হয় আপনি ক্লিতে = "ড্রপডাউন" লিটিতে যুক্ত করেছেন, আমি একটি সময়সীমা যুক্ত করেছি

var hoverTimeout;
$('.dropdown').hover(function() {
    clearTimeout(hoverTimeout);
    $(this).addClass('open');
}, function() {
    var $self = $(this);
    hoverTimeout = setTimeout(function() {
        $self.removeClass('open');
    }, 150);
});

2

একটি সঠিক প্লাগইন সহ আপডেট হয়েছে

আমি ড্রপডাউন হোভার কার্যকারিতাটির জন্য একটি সঠিক প্লাগইন প্রকাশ করেছি, যাতে আপনি dropdown-toggleউপাদানটিতে ক্লিক করার পরে কী ঘটে তা সংজ্ঞায়িত করতে পারেন :

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


আমি কেন এটি তৈরি করেছি, যখন ইতিমধ্যে অনেকগুলি সমাধান রয়েছে?

আমার সমস্ত বিদ্যমান বিদ্যমান সমাধানগুলির সাথে সমস্যা ছিল। সাধারণ সিএসএসগুলি .openক্লাসটি ব্যবহার করছে না .dropdown, সুতরাং যখন ড্রপডাউনটি দৃশ্যমান হবে তখন ড্রপডাউন টগল উপাদানটির বিষয়ে কোনও প্রতিক্রিয়া হবে না।

জেএসগুলি ক্লিক করার ক্ষেত্রে হস্তক্ষেপ করছে .dropdown-toggle, সুতরাং ড্রপডাউনটি হোভারের উপরে প্রদর্শিত হবে, তারপরে একটি খোলা ড্রপডাউনটিতে ক্লিক করার পরে এটি লুকিয়ে রাখবে এবং মাউসটি সরিয়ে নিয়ে যাওয়া আবার ড্রপ ডাউনকে দেখাবে। কিছু জেএস সমাধান আইওএসের সামঞ্জস্যতা ব্রেক করছে, কিছু প্লাগইন আধুনিক ডেস্কটপ ব্রাউজারগুলিতে কাজ করছে না যা স্পর্শ ইভেন্টগুলিকে সমর্থন করছে।

এই কারণেই আমি বুটস্ট্র্যাপ ড্রপডাউন হোভার প্লাগইন তৈরি করেছি যা কোনও হ্যাক ছাড়াই কেবলমাত্র স্ট্যান্ডার্ড বুটস্ট্র্যাপ জাভাস্ক্রিপ্ট এপিআই ব্যবহার করে এই সমস্ত সমস্যাগুলি প্রতিরোধ করে।



1

কোনও clickইভেন্ট দিয়ে ট্রিগার করাতে একটি hoverছোট্ট ত্রুটি রয়েছে। যদি mouse-inএবং তারপরে একটি clickউপ-বিপরীত প্রভাব তৈরি করে। এটা opensকখন mouse-outএবং closeকখন mouse-in। একটি ভাল সমাধান:

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

1

এইচটিএমএল

        <div class="dropdown">

            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                Dropdown Example <span class="caret"></span>
            </button>

            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>

        </div> 

jQuery

        $(document).ready( function() {                

            /* $(selector).hover( inFunction, outFunction ) */
            $('.dropdown').hover( 
                function() {                        
                    $(this).find('ul').css({
                        "display": "block",
                        "margin-top": 0
                    });                        
                }, 
                function() {                        
                    $(this).find('ul').css({
                        "display": "none",
                        "margin-top": 0
                    });                        
                } 
            );

        });

codepen


0

আমি যে প্রস্তাবটির প্রস্তাব দিচ্ছি এটি সনাক্ত করে যদি এটির স্পর্শ না করা ডিভাইসটি এবং navbar-toggle(হ্যামবার্গার মেনু) দৃশ্যমান না হয় এবং প্যারেন্ট মেনু আইটেমটিকে সাবমেরু প্রকাশ করে এবং ক্লিকের সাথে তার লিঙ্কটি অনুসরণ করে

টেন মার্জিন-শীর্ষ 0ও করে তোলে কারণ কিছু ব্রাউজারে নাবার এবং মেনুর মধ্যে ফাঁক আপনাকে সাবাইটাইটগুলিতে যেতে দেয় না

$(function(){
    function is_touch_device() {
        return 'ontouchstart' in window        // works on most browsers 
        || navigator.maxTouchPoints;       // works on IE10/11 and Surface
    };

    if(!is_touch_device() && $('.navbar-toggle:hidden')){
      $('.dropdown-menu', this).css('margin-top',0);
      $('.dropdown').hover(function(){ 
          $('.dropdown-toggle', this).trigger('click').toggleClass("disabled"); 
      });			
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>

$(function(){
  $("#nav .dropdown").hover(
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
      $(this).toggleClass('open');
    },
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
      $(this).toggleClass('open');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>


0

বুটস্ট্র্যাপ ড্রপ-ডাউন হোভারে কাজ করে, এবং সম্পত্তি প্রদর্শন যুক্ত করে ক্লিকের কাছে থাকুন : ব্লক; সিএসএসে এবং বোতাম ট্যাগ থেকে এই বৈশিষ্ট্যগুলি ডেটা-টগল = "ড্রপডাউন" ভূমিকা = "বোতাম" অপসারণ করে

.dropdown:hover .dropdown-menu {
  display: block;
}
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">                                     
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>
</div>

</body>
</html>

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.