懸停時CSS菜單損壞-閃爍效果

Question

當我將此示例縮小為“移動電話”大小時，發生了一件奇怪的事情。

如果從菜單中單擊“ Link2”，則會看到其子菜單已被切斷，並且如果您嘗試將鼠標懸停在子菜單下方的鏈接上，則會發生劇烈的閃爍。

為什么是這樣？ 有人可以幫我解決這個問題嗎？

感謝您的任何幫助 ：-）

演示： http : //jsfiddle.net/qefszucv/

 $( document ).ready(function() { $('nav.primary').prepend('<div id="menu-button">Sports Menu</div>'); $('nav.primary #menu-button').on('click', function(){ var menu = $(this).next('ul'); if (menu.hasClass('open')) { menu.removeClass('open'); } else { menu.addClass('open'); } }); $('.inline .menu-item-has-children a').click(function () { //Expand or collapse this panel $(this).next('ul').slideToggle(); $(this).closest('li').siblings().children('ul').slideUp(); }); }); 

 /* import */ /* line 1, sass/components/_reset.scss */ div, ul, ol, h1, h2, h3, h4, h5, h6, p, html, body { margin: 0; padding: 0; } /* line 1, sass/components/_globals.scss */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } /* line 7, sass/components/_globals.scss */ .left { float: left; } /* line 11, sass/components/_globals.scss */ .right { float: right; } /* line 15, sass/components/_globals.scss */ .center { margin: 0 auto; } /* line 24, sass/components/_globals.scss */ ul.naked, ol.naked { list-style: none; } /* line 30, sass/components/_globals.scss */ ul.horizontal, ul.inline, ol.horizontal, ol.inline { /** * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * contenteditable attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that are clearfixed. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ /** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ *zoom: 1; } /* line 31, sass/components/_globals.scss */ ul.horizontal li, ul.inline li, ol.horizontal li, ol.inline li { float: left; } /* line 65, sass/components/_espresso.scss */ ul.horizontal:before, ul.horizontal:after, ul.inline:before, ul.inline:after, ol.horizontal:before, ol.horizontal:after, ol.inline:before, ol.inline:after { content: " "; /* 1 */ display: table; /* 2 */ } /* line 71, sass/components/_espresso.scss */ ul.horizontal:after, ul.inline:after, ol.horizontal:after, ol.inline:after { clear: both; } /* line 42, sass/components/_globals.scss */ .text-left { text-align: left; } /* line 42, sass/components/_globals.scss */ .text-right { text-align: right; } /* line 42, sass/components/_globals.scss */ .text-center { text-align: center; } /* line 47, sass/components/_globals.scss */ .circle { display: block; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; border: 6px solid; border-color: #ffffff; height: 156px; width: 156px; } /* line 62, sass/components/_globals.scss */ .columns img { min-width: 100%; max-width: 100%; height: auto; } /* line 68, sass/components/_globals.scss */ img.no-scale { min-width: 0; max-width: none !important; width: auto; display: block; } /* line 76, sass/components/_globals.scss */ .display-table { display: table; width: 100%; height: 100%; } /* line 81, sass/components/_globals.scss */ .display-table .center-center { display: table-cell; vertical-align: middle; text-align: center; } /* line 19, sass/components/_grid.scss */ .row { position: relative; margin: 0 auto; padding: 0; width: 100%; max-width: 1180px; } /* line 12, sass/components/_grid.scss */ .row:after { content: ""; display: table; clear: both; } /* line 28, sass/components/_grid.scss */ .row .row { margin-left: -11px; margin-right: -11px; width: auto; } /* line 36, sass/components/_grid.scss */ .row.colapse .column, .row.colapse .columns { padding: 0; } /* line 40, sass/components/_grid.scss */ .row.colapse .row { margin: 0; } /* line 47, sass/components/_grid.scss */ .column, .columns { position: relative; margin-top: 0; margin-bottom: 0; padding-left: 11px; padding-right: 11px; width: 100%; min-height: 1px; float: left; } /* line 59, sass/components/_grid.scss */ .column.end, .columns.end { float: right; } /* line 1, sass/components/_navigation.scss */ .menu { font-family: "proxima-nova"; padding-top: 3%; position: static; } /* line 8, sass/components/_navigation.scss */ .menu a { color: #63615a; font-size: 1.2em; text-decoration: none; text-transform: lowercase; } /* line 14, sass/components/_navigation.scss */ .menu a:hover { color: #748d1b; } /* line 21, sass/components/_navigation.scss */ .primary-item { margin-right: 2em; float: left; } /* line 27, sass/components/_navigation.scss */ .primary-item:hover .sub-menu { max-height: 300px; padding-top: 27px; padding-bottom: 63px; } /* line 36, sass/components/_navigation.scss */ .primary-item:hover .sub-menu a { opacity: 1; } /* line 41, sass/components/_navigation.scss */ .sub-menu { max-height: 0px; width: 100%; overflow-y: hidden; white-space: nowrap; position: absolute; top: 97px; left: -20px; right: -20px; padding-left: 24px; padding-right: 24px; padding-top: 0; padding-bottom: 0; /*background-color:rgb(228,228,228);*/ background: #f2f2f2; transition: all 0.3s ease-in; list-style: none; } /* line 60, sass/components/_navigation.scss */ .sub-menu a { opacity: 0; transition: all 0.3s ease-in; } /* line 73, sass/components/_navigation.scss */ .sub-menu > li { width: 25%; float: left; } /* line 77, sass/components/_navigation.scss */ .sub-menu > li > a { font-size: 1.2em; } /* line 84, sass/components/_navigation.scss */ .sub-menu .sub-menu { width: 100%; list-style: none; padding-top: 25px; position: relative; top: 0; } /* line 92, sass/components/_navigation.scss */ .sub-menu .sub-menu li { float: none; width: 100%; } /* line 97, sass/components/_navigation.scss */ .sub-menu .sub-menu li a { font-size: 14px; } @media only screen and (max-width: 767px) { /* line 290, sass/_layout.scss */ footer { padding-left: 50px; } /* line 291, sass/_layout.scss */ nav.columns { padding-left: 0; } /* line 292, sass/_layout.scss */ nav.columns ul { padding-left: 45px; } } @media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2 / 1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) { /* line 377, sass/_layout.scss */ img.logo { min-width: 100%; } /* line 380, sass/_layout.scss */ nav.columns ul { padding-left: 0px; } /* line 384, sass/_layout.scss */ nav.primary { padding-top: 0; } /* line 387, sass/_layout.scss */ nav.primary > ul { max-height: 0; overflow: hidden; -webkit-transition: max-height 0.35s ease-out; -moz-transition: max-height 0.35s ease-out; -ms-transition: max-height 0.35s ease-out; -o-transition: max-height 0.35s ease-out; transition: max-height 0.35s ease-out; } /* line 396, sass/_layout.scss */ nav.primary > ul > li > ul { width: 100%; display: block; } /* line 400, sass/_layout.scss */ nav.primary.align-right ul li a { text-align: left; } /* line 403, sass/_layout.scss */ nav.primary > ul > li > ul > li { width: 100%; display: block; } /* line 407, sass/_layout.scss */ nav.primary.align-right ul ul li a { text-align: left; } /* line 410, sass/_layout.scss */ nav.primary > ul > li > ul > li > a { width: 100%; display: block; } /* line 414, sass/_layout.scss */ nav.primary ul li ul li a { width: 100%; } /* line 417, sass/_layout.scss */ nav.primary.align-center > ul { text-align: left; } /* line 420, sass/_layout.scss */ nav.primary.align-center > ul > li { display: block; } /* line 423, sass/_layout.scss */ nav.primary > ul.open { max-height: 1000px; } /* line 426, sass/_layout.scss */ nav.primary ul { width: 100%; } /* line 429, sass/_layout.scss */ nav.primary ul > li { float: none; width: 100%; } /* line 433, sass/_layout.scss */ nav.primary ul li a { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; padding: 12px 20px; } /* line 440, sass/_layout.scss */ nav.primary ul > li:after { display: none; } /* line 443, sass/_layout.scss */ nav.primary ul li.has-sub > a:after, nav.primary ul li.has-sub > a:before, nav.primary ul li ul li.has-sub:after, nav.primary ul li ul li.has-sub:before { display: none; } /* line 449, sass/_layout.scss */ nav.primary ul li ul, nav.primary ul li ul li ul, nav.primary ul li ul li:hover > ul, nav.primary.align-right ul li ul, nav.primary.align-right ul li ul li ul, nav.primary.align-right ul li ul li:hover > ul { left: 0; position: relative; right: auto; } /* line 459, sass/_layout.scss */ nav.primary ul li ul li, nav.primary ul li:hover > ul > li { max-height: 999px; position: relative; background: none; } /* line 465, sass/_layout.scss */ nav.primary ul li ul li a { padding: 0px 20px 0px 35px; } /* line 468, sass/_layout.scss */ nav.primary ul li ul ul li a { padding: 0px 20px 0px 50px; } /* line 471, sass/_layout.scss */ nav.primary ul li ul li:hover > a { color: #000000; } /* line 474, sass/_layout.scss */ nav.primary #menu-button { display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; padding: 20px 20px 10px 20px; text-transform: uppercase; font-weight: 700; font-size: 14px; letter-spacing: 1px; color: #111; cursor: pointer; } /* line 488, sass/_layout.scss */ nav.primary #menu-button:after { display: block; content: ''; position: absolute; height: 3px; width: 22px; border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff; right: 20px; top: 16px; } /* line 499, sass/_layout.scss */ nav.primary #menu-button:before { display: block; content: ''; position: absolute; height: 3px; width: 22px; border-top: 2px solid #ffffff; right: 20px; top: 26px; } /* line 509, sass/_layout.scss */ .sub-menu { transition: none; top: 0; max-height: 100%; margin-bottom: 0; background: white; } /* line 510, sass/_layout.scss */ .sub-menu li { display: block; } /* line 511, sass/_layout.scss */ .sub-menu a { opacity: 1; } /* line 512, sass/_layout.scss */ .sub-menu .sub-menu { padding-top: 0; display: none; } /* line 516, sass/_layout.scss */ .primary-item:hover .sub-menu { padding: 0; } /* line 519, sass/_layout.scss */ li.primary-item { padding-bottom: 20px; } /* line 523, sass/_layout.scss */ .entry { margin-bottom: 30px; } /* line 527, sass/_layout.scss */ .category-container { display: inline-block; margin-bottom: 40px; } } @media screen and (max-width: 480px) { /* line 537, sass/_layout.scss */ .sticky-header { padding-top: 0px; position: absolute; } /* line 541, sass/_layout.scss */ .sticky-header .menu { background: url("../images/logo.png") 95% 10px no-repeat; background-size: 145px 55px; } /* line 547, sass/_layout.scss */ footer { padding-left: 0px; } /* line 551, sass/_layout.scss */ .logo { display: none; } /* line 555, sass/_layout.scss */ nav.primary #menu-button { padding: 30px 20px 10px 20px; } /* line 559, sass/_layout.scss */ footer ul li { border: 0; display: block; width: 100%; padding: 0 20px !important; } /* line 566, sass/_layout.scss */ nav.primary #menu-button:after, nav.primary #menu-button:before { display: none; } /* line 571, sass/_layout.scss */ .columns img.logo { position: fixed; top: 15px; right: 15px; width: 145px; min-width: 145px; } } @media screen and (max-width: 480px) { /* line 603, sass/_layout.scss */ li.primary-item { background: #ddd; padding-top: 0; padding-bottom: 0; border-bottom: 2px solid #ccc; } /* line 609, sass/_layout.scss */ li.primary-item a { display: block; } /* line 612, sass/_layout.scss */ .sub-menu li.menu-item-has-children a { color: #748d1b; } /* line 615, sass/_layout.scss */ .sub-menu .sub-menu { display: block; } /* line 618, sass/_layout.scss */ nav.primary ul li ul ul li a { padding: 0px 20px 0px 35px; } /* line 621, sass/_layout.scss */ .sub-menu .sub-menu li a { font-size: 17px; color: #ccc; } /* line 625, sass/_layout.scss */ ul.sub-menu .menu-item-has-children { padding-top: 10px; margin-bottom: 10px; } /* line 629, sass/_layout.scss */ main { float: left; } /* line 633, sass/_layout.scss */ .accordion-toggle { cursor: pointer; } /* line 636, sass/_layout.scss */ .primary-item > .sub-menu { display: none; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <header class="main-header " style="background-image:url('');"> <div class="sticky-header"> <div class="row "> <nav class="medium-8 columns primary menu" style="background:red"> <ul class="inline naked"> <li class="primary-item"><a href="http://localhost:8888/sportsy/wordpress">Link 1</a></li> <li id="menu-item-142" class="primary-item menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-142"><a href="#">This is Link Number 2</a> <ul class="sub-menu"> <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-76"><a href="http://localhost:8888/sportsy/wordpress/?page_id=45">Sub1</a> <ul class="sub-menu"> <li id="menu-item-77" class="sub-sub-menu menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="http://localhost:8888/sportsy/wordpress/?page_id=47">Test</a></li> <li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78"><a href="http://localhost:8888/sportsy/wordpress/?page_id=49">Test</a></li> </ul> </li> <li id="menu-item-79" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-79"><a href="http://localhost:8888/sportsy/wordpress/?page_id=35">Sub2</a> <ul class="sub-menu"> <li id="menu-item-80" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-80"><a href="http://localhost:8888/sportsy/wordpress/?page_id=37">Test</a></li> <li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a href="http://localhost:8888/sportsy/wordpress/?page_id=39">Test</a></li> <li id="menu-item-81" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-81"><a href="http://localhost:8888/sportsy/wordpress/?page_id=41">Test</a></li> <li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><a href="http://localhost:8888/sportsy/wordpress/?page_id=43">Test</a></li> </ul> </li> <li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-84"><a href="http://localhost:8888/sportsy/wordpress/?page_id=51">Sub3</a> <ul class="sub-menu"> <li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88"><a href="http://localhost:8888/sportsy/wordpress/?page_id=53">Test</a></li> <li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-87"><a href="http://localhost:8888/sportsy/wordpress/?page_id=55">Test</a></li> <li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85"><a href="http://localhost:8888/sportsy/wordpress/?page_id=57">Test</a></li> <li id="menu-item-86" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-86"><a href="http://localhost:8888/sportsy/wordpress/?page_id=59">Test</a></li> </ul> </li> <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"><a href="http://localhost:8888/sportsy/wordpress/?page_id=61">Sub4</a> <ul class="sub-menu"> <li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88"><a href="http://localhost:8888/sportsy/wordpress/?page_id=53">Test</a></li> <li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-87"><a href="http://localhost:8888/sportsy/wordpress/?page_id=55">Test</a></li> <li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85"><a href="http://localhost:8888/sportsy/wordpress/?page_id=57">Test</a></li> <li id="menu-item-86" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-86"><a href="http://localhost:8888/sportsy/wordpress/?page_id=59">Test</a></li> </ul> </li> </ul> </li> <li id="menu-item-89" class="primary-item menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-89"><a href="http://localhost:8888/sportsy/wordpress/?page_id=31">Link 3</a> <ul class="sub-menu"> <li id="menu-item-101" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-101"><a href="http://localhost:8888/sportsy/wordpress/?page_id=92">Test</a></li> <li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99"><a href="http://localhost:8888/sportsy/wordpress/?page_id=97">Test</a></li> <li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><a href="http://localhost:8888/sportsy/wordpress/?page_id=94">Test</a></li> </ul> </li> </ul> </nav> </div> </div> </header> 

Answer 1

有兩件事，首先，您可能不需要$(document).ready(function(){}); 您可以只使用美元符號：

$('nav.primary').prepend('<div id="menu-button">Sports Menu</div>');

$('nav.primary #menu-button').on('click', function(){
    var menu = $(this).next('ul');
    if (menu.hasClass('open')) {
      menu.removeClass('open');
    } else {
      menu.addClass('open');
    }
});

$('.inline .menu-item-has-children a').click(function () {

    //Expand or collapse this panel
    $(this).next('ul').slideToggle();
    $(this).closest('li').siblings().children('ul').slideUp();
});

接下來，您可以替換為：

if (menu.hasClass('open')) {
    menu.removeClass('open');
} else {
    menu.addClass('open');
}

有了這個：

menu.toggleClass('open');

由於菜單距離下拉菜單太遠，因此發生了閃爍。 我會在子菜單中刪除css的最高值。

動畫的放慢是我不確定的一件事，但是我認為它的工作比實現動畫要困難得多。