ක්ලික් කිරීම වෙනුවට හෝවර් මත ට්විටර් බූට්ස්ට්‍රැප් මෙනු ඩ්‍රොප් ඩවුන් කරන්නේ කෙසේද

මෙනු මාතෘකාව ක්ලික් කිරීමට වඩා මගේ බූට්ස්ට්‍රැප් මෙනුව ස්වයංක්‍රීයව සැරිසැරීමට මම කැමතියි. මෙනු මාතෘකා අසල ඇති කුඩා ඊතල නැති කිරීමට ද මම කැමතියි.

බහුවිධ උප මෙනූ සඳහා සහය ඇති නවතම (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>

නිරූපණය

මෙනුව ස්වයංක්‍රීයව සැරිසැරීම සඳහා ලබා ගැනීම සඳහා මූලික 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

වන අනුවාදය සහ 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 වන අනුවාදයේ ඇති කරත්තය ඉවත් කිරීම සඳහා ඔබට CSS පිළිබඳ තව ටිකක් අවබෝධයක් අවශ්‍ය වන අතර :afterව්‍යාජ මූලද්‍රව්‍යය වඩාත් විස්තරාත්මකව ක්‍රියා කරන්නේ කෙසේදැයි සොයා බැලීමට මම යෝජනා කරමි . ට්විටර් බූට්ස්ට්‍රැප් උදාහරණයේ ඇති ඊතල ඉලක්ක කර ඉවත් කිරීමට ඔබ තේරුම් ගැනීමට යන ගමන ආරම්භ කිරීම සඳහා, ඔබ පහත සඳහන් CSS තේරීම් සහ කේතය භාවිතා කරයි:

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

මම ඔබට ලබා දී ඇති පිළිතුරු පමණක් භාවිතා නොකර මෙම ක්‍රියා කරන ආකාරය පිළිබඳව තවදුරටත් සොයා බැලුවහොත් එය ඔබට වාසිදායක වනු ඇත.

මව් හෝවර් හි උප මෙනු පෙන්වීම වැළැක්වීම සඳහා ">" ළමා සංයෝජකය අපට නොමැති බව පෙන්වා දීම ගැන oc කොකා අකාත්ට ස්තූතියි

"මගේ හිස රිදෙනවා" (එය විශිෂ්ටයි) හි පිළිතුරට අමතරව:

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

කල් පවතින ගැටළු 2 ක් ඇත:

1. පතන සබැඳිය ක්ලික් කිරීමෙන් පතන මෙනුව විවෘත වේ. පරිශීලකයා වෙනත් තැනක ක්ලික් කළහොත් හෝ එය පසුපසට හරවා අමුතු UI එකක් නිර්මාණය නොකළහොත් එය විවෘතව පවතිනු ඇත.
2. පතන සම්බන්ධකය සහ පතන මෙනුව අතර 1px ආන්තිකයක් ඇත. ඔබ ඩ්‍රොප් ඩවුන් සහ ඩ්‍රොප් ඩවුන් මෙනුව අතර සෙමින් ගමන් කරන්නේ නම් ඩ්‍රොප් ඩවුන් මෙනුව සැඟවීමට මෙය හේතු වේ.

(1) සඳහා විසඳුම වන්නේ nav පන්තියේ "පන්තිය" සහ "දත්ත-ටොගල්" අංග ඉවත් කිරීමයි

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

මෙය ඔබගේ මව් පිටුවට සබැඳියක් නිර්මාණය කිරීමේ හැකියාව ද ලබා දෙයි - එය පෙරනිමි ක්‍රියාත්මක කිරීම සමඟ කළ නොහැකි විය. ඔබට පරිශීලකයා යැවීමට අවශ්‍ය ඕනෑම පිටුවක් සමඟ "#" ආදේශ කළ හැකිය.

(2) සඳහා විසඳුම වන්නේ .dropdown-menu selector හි ආන්තිකය ඉවත් කිරීමයි

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

මම ටිකක් 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();
});

මෙහි හොඳ විසඳුම් ගොඩක් තිබේ. ඒත් මම හිතුවා මම ඉස්සරහට ගිහින් මගේ විකල්පය මෙතනට දාන්නම් කියලා. එය හුදෙක් සරල jQuery ස්නිපටයක් වන අතර එය ක්ලික් කිරීම වෙනුවට ඩ්‍රොප් ඩවුන් සඳහා සැරිසැරීමට සහය දක්වන්නේ නම් එය බූට්ස්ට්‍රැප් ක්‍රමයට සමාන වේ. මම මෙය 3 වන අනුවාදය සමඟ පමණක් අත්හදා බැලුවෙමි, එබැවින් එය 2 වන අනුවාදය සමඟ ක්‍රියා කරයිදැයි මම නොදනිමි. එය ඔබේ සංස්කාරකයේ කුඩා කොටසක් ලෙස සුරකින්න සහ එය යතුරක පහරකින් තබා ගන්න.

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

මූලික වශයෙන්, එය හුදෙක් ඔබ පතන පන්තියේ සැරිසරන විට, එය විවෘත පන්තිය එයට එකතු කරනු ඇත. එවිට එය ක්‍රියාත්මක වේ. ඔබ ඩ්‍රොප් ඩවුන් පන්තිය හෝ දරුවා උල් / ලයිස් සමඟ මව් ලයි මත සැරිසැරීම නැවැත්වූ විට, එය විවෘත පන්තිය ඉවත් කරයි. නිසැකවම, මෙය බොහෝ විසඳුම් වලින් එකක් පමණක් වන අතර .dropdown හි නිශ්චිත අවස්ථාවන්හිදී පමණක් එය ක්‍රියාත්මක කිරීමට ඔබට එයට එකතු කළ හැකිය. නැතහොත් දෙමව්පියන්ට හෝ දරුවාට සංක්‍රාන්තියක් එක් කරන්න.

ඔබේ CSS විලාසය කේත පේළි තුනකින් අභිරුචිකරණය කරන්න

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

ඔබට මේ 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>

මෙන්න නිරූපණයක්

මෙම පිළිතුර ic මයිකල් පිළිතුර මත රඳා පැවතුනි , ඩ්‍රොප් ඩවුන් මෙනුව නිසියාකාරව ක්‍රියාත්මක කිරීම සඳහා මම යම් යම් වෙනස්කම් සිදු කර ඇත.

[යාවත්කාලීන කරන්න] ප්ලගිනය GitHub හි ඇත අතර මම සමහර වැඩිදියුණු කිරීම් සඳහා ක්‍රියා කරමින් සිටිමි (දත්ත-ගුණාංග සමඟ පමණක් භාවිතා කිරීම වැනි (JS අවශ්‍ය නොවේ). මම පහත කේතය අතහැර දමා ඇත, නමුත් එය GitHub හි ඇති දේට සමාන නොවේ.

මම තනිකරම CSS අනුවාදයට කැමතියි, නමුත් එය වැසීමට පෙර ප්‍රමාද වීම සතුටක්, මන්ද එය සාමාන්‍යයෙන් වඩා හොඳ පරිශීලක අත්දැකීමක් වන නිසා (එනම්, ඩ්‍රොප් ඩවුන් එකෙන් පිටත 1 px ක් යන මූසික ස්ලිප් එකකට ද ished ුවම් නොලැබේ), සහ අදහස් වල සඳහන් පරිදි , ඔබ සමඟ කටයුතු කිරීමට ඇති ආන්තිකයෙන් 1px ක් හෝ සමහර විට ඔබ මුල් බොත්තමෙන් පහළට වැටෙන විට nav අනපේක්ෂිත ලෙස වසා දමයි.

මම අඩවි කිහිපයක භාවිතා කළ ඉක්මන් කුඩා ප්ලගිනයක් නිර්මාණය කළ අතර එය හොඳින් ක්‍රියාත්මක වේ. සෑම nav අයිතමයක්ම ස්වාධීනව හසුරුවනු ලැබේ, එබැවින් ඔවුන්ට ඔවුන්ගේම ප්‍රමාද කාලරාමු යනාදිය ඇත.

ජේ

// 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 විට අලුත් එකක්, ඔබට සැරිසරන්න විවෘත සිටින සියලු අනෙකුත් dropdowns ක්ෂණිකව සමීප වනු ඇත.

පිරිසිදු CSS නොවේ, නමුත් මෙම ප්‍රමාද වේලාවේදී වෙනත් කෙනෙකුට උපකාර කරනු ඇතැයි අපේක්‍ෂා කරමු (එනම් මෙය පැරණි නූලකි).

ඔබට අවශ්‍ය නම්, #concrete5මෙම සාරාංශයේ විවිධ පියවරයන් හරහා එය ක්‍රියාත්මක කිරීම සඳහා මා විසින් සිදු කරන ලද විවිධ ක්‍රියාදාමයන් ( IRC පිළිබඳ සාකච්ඡාවකදී ) ඔබට දැක ගත හැකිය : https://gist.github.com/3876924

ප්ලගීන රටා ප්‍රවේශය තනි ටයිමර් යනාදිය සඳහා සහය දැක්වීමට වඩා පිරිසිදු ය.

වැඩි විස්තර සඳහා බ්ලොග් සටහන බලන්න .

මෙය මට ප්‍රයෝජනවත් විය:

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

මෙය Bootstrap 3 තුළට සාදා ඇත. මෙය ඔබගේ CSS වෙත එක් කරන්න:

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

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

$().dropdown('toggle')පතන මෙනුව ටොගල් කිරීමට ඔබට පෙරනිමි ක්‍රමය භාවිතා කළ හැකිය :

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

එක් කිරීමට අවශ්‍ය නම්, ඔබට බහුවිධ අඩුවීම් තිබේ නම් (මා කරන පරිදි) ඔබ ලිවිය යුත්තේ:

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

එය නිසි ලෙස ක්‍රියා කරයි.

මගේ මතය අනුව හොඳම ක්‍රමය මෙයයි:

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

එය කළ හැකි හොඳම ක්‍රමය වන්නේ බූට්ස්ට්‍රැප් ක්ලික් කිරීමේ සිදුවීම හොවර් එකකින් අවුලුවාලීමයි. මේ ආකාරයෙන්, එය තවමත් ස්පර්ශ උපාංග හිතකාමී ලෙස පැවතිය යුතුය.

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

මම එය පහත පරිදි කළමනාකරණය කර ඇත්තෙමි.

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

මම හිතනවා මේක කෙනෙකුට උදව් කරයි කියලා ...

.Dropdown-menu සඳහා බූට්ස්ට්‍රැප් CSS ආන්තිකය නැවත සැකසීමට ආන්තික-ඉහළ: 0 එකතු කර ඇති අතර එමඟින් පරිශීලකයා පතන මෙනුවේ සිට මෙනු ලැයිස්තුවට සෙමින් සැරිසරන විට මෙනු ලැයිස්තුව විසුරුවා හරිනු නොලැබේ.

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

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

මෙය බොහෝ විට මෝඩ අදහසක් විය හැකිය, නමුත් පහත දැක්වෙන ඊතලය ඉවත් කිරීමට, ඔබට මකා දැමිය හැකිය

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

ඉහළට යොමු කරන තැනැත්තාට මෙය කිසිවක් නොකරයි, නමුත් ...

බූට්ස්ට්‍රැප් 3 ඩ්‍රොප් ඩවුන් හෝවර් ක්‍රියාකාරිත්වය සඳහා මම නිසි ප්ලගිනයක් ප්‍රකාශයට පත් කර ඇති අතර, එමඟින් ක්ලික් කිරීමෙන් කුමක් සිදුවේද යන්න ඔබට අර්ථ දැක්විය හැකිය.dropdown-toggle මූලද්‍රව්‍යය (ක්ලික් කිරීම අක්‍රිය කළ හැකිය):

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

දැනටමත් බොහෝ විසඳුම් ඇති විට මා එය සෑදුවේ ඇයි?

කලින් පැවති සියලු විසඳුම් සමඟ මට ගැටළු ඇති විය. සරල CSS ඒවා .openමත පන්තිය භාවිතා නොකරයි .dropdown, එබැවින් පතන පහළට පෙනෙන විට පතන ටොගල් මූලද්‍රව්‍යය පිළිබඳ ප්‍රතිපෝෂණයක් නොලැබේ.

Js අය ක්ලික් කිරීම බාධා කරයි .dropdown-toggle , එම නිසා ඩ්‍රොප් ඩවුන් එක හොවර් මත දිස් වේ, පසුව විවෘත ඩ්‍රොප් ඩවුන් එකක් මත ක්ලික් කරන විට එය සඟවයි, සහ මූසිකය පිටතට ගෙනයාම නැවත පෙන්වීමට ඩ්‍රොප් ඩවුන් අවුලුවනු ඇත. සමහර js විසඳුම් iOS අනුකූලතාව බිඳ දමයි, සමහර ප්ලගීන ස්පර්ශ සිදුවීම් සඳහා සහය දක්වන නවීන ඩෙස්ක්ටොප් බ්‍රව්සර් මත ක්‍රියා නොකරයි.

ඒ නිසාම මම බූට්ස්ට්‍රැප් ඩ්‍රොප්ඩවුන් හෝවර් ප්ලගිනය සාදන ලද අතර එය කිසිදු ගැටළුවක් නොමැතිව සම්මත බූට්ස්ට්‍රැප් ජාවාස්ක්‍රිප්ට් ඒපීඅයි පමණක් භාවිතා කිරීමෙන් මෙම සියලු ගැටලු වලක්වනු ඇත. Aria ගුණාංග පවා මෙම ප්ලගිනය සමඟ හොඳින් ක්‍රියා කරයි.

මූසිකයේ උප මෙනුව විවෘත කිරීමට මෙම කේතය භාවිතා කරන්න (ඩෙස්ක්ටොප් එක පමණි):

$('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), උප මෙනුව සම්පූර්ණ තිරයේ පළල ජංගම දුරකථනයෙන් ලබා ගනී.

$('.dropdown').hover(function(e){$(this).addClass('open')})

මෙය ඉහළට සැඟවෙනු ඇත

.navbar .dropdown-menu:before {
   display:none;
}
.navbar .dropdown-menu:after {
   display:none;
}

මෙය ටැබ්ලටයකට වඩා කුඩා නම් පහත වැටීම් සහ ඒවායේ භාරයන් සැඟවිය යුතුය.

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

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

2 වන අනුවාදය සඳහා ඉතා සරල විසඳුම, CSS පමණි. ජංගම සහ ටැබ්ලටය සඳහා එකම මිත්‍රශීලී ක්‍රියාකාරිත්වය තබා ගනී.

@media (min-width: 980px) {
    .dropdown:hover .dropdown-menu {
       display: block;
    }
}

මෙම ස්ක්‍රිප්ට් එක සමඟ 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') })
});

}); 

මෙන්න මගේ තාක්ෂණය ඔබ මෙනුවේ හෝ ටොගල් බොත්තම මත සැරිසැරීම නැවැත්වීමෙන් පසු මෙනුව වැසීමට පෙර සුළු ප්‍රමාදයක් එක් කරයි. මෙම <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);
});

සුදර්ශන් ගේ පිළිතුර වැඩි දියුණු කිරීම සඳහා , මම මෙය මාධ්‍ය විමසුමකින් ඔතා XS දර්ශන පළලෙහි සැරිසැරීම වැළැක්වීම සඳහා ...

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

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

සලකුණු කිරීමේදී ඇති කරත්තය අවශ්‍ය නොවේ, li සඳහා පතන පන්තිය පමණි .

මෙය වර්ඩ්ප්‍රෙස් බූට්ස්ට්‍රැප් සඳහා ක්‍රියා කරයි:

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

එබැවින් ඔබට මෙම කේතය ඇත:

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

සාමාන්‍යයෙන් එය ක්ලික් කිරීමේ සිදුවීමක් මත ක්‍රියාත්මක වන අතර ඔබට එය හෝවර් සිදුවීමක වැඩ කිරීමට අවශ්‍යය. මෙය ඉතා සරලයි, මෙම JavaScript / 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 එම්එස් පසු මෙනුව සඟවන්නෙමු. මා එය භාවිතා කරන්නේ මන්දැයි ඔබ සිතන්නේ නම්, එයට හේතුව කර්සරය මෙනුව හරහා බොත්තමෙන් ඇදගෙන යාමට ඔබට කාලය අවශ්‍ය වීමයි. ඔබ මෙනුවේ සිටින විට, වේලාව නැවත සකසා ඇති අතර ඔබට අවශ්‍ය තරම් කාලයක් එහි රැඳී සිටිය හැකිය. ඔබ මෙනුවෙන් පිටවන විට, අපි කල් ඉකුත්වීමකින් තොරව මෙනුව ක්ෂණිකව සඟවන්නෙමු.

මම මෙම කේතය බොහෝ ව්‍යාපෘති වල භාවිතා කර ඇත්තෙමි, ඔබට එය භාවිතා කිරීමේ කිසියම් ගැටළුවක් ඇත්නම්, මගෙන් ප්‍රශ්න ඇසීමට නිදහස් වන්න.