我正在构建一个下拉导航栏，但遇到了问题。 jsfiddle
我想要实现的是，当用户将鼠标悬停在菜单项上并且该菜单项具有子项时，导航容器的高度会增加以适合其中的所有内容。我设法做到了这一点，但问题是悬停元素的宽度会扩大，以便它可以容纳里面的所有内容。我怎样才能防止这种情况发生？
我有这个 HTML:
<div class="container" id="menu-container">
<ul class="main-menu clearfix">
<li class="dropdown"><a href="">Shop</a>
<ul class="menu">
<li class="dropdown float-child-to-right"><a href="">Filter by</a>
<ul class="menu float-to-right">
<li class="dropdown"><a href="">Products</a>
<ul class="menu block-element">
<li><a href="">Guestbooks</a></li>
<li><a href="">Notebooks</a></li>
</ul>
</li>
<li class="dropdown block-element"><a href="">Collections</a>
<ul class="menu">
<li><a href="">Handle it</a></li>
<li><a href="">Tuff Love</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contacts</a></li>
</ul>
<div class="clear"></div>
CSS:
* {
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
}
.container {
border-bottom: #dedede 1px solid;
}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
}
.main-menu li {
float: left;
min-width: 100px;
}
.block-element li {
float: none;
display: block;
}
.float-to-right {
float: right;
}
.main-menu li ul {
/*display: none;*/
}
.main-menu > ul {
position: relative;
}
和JS:
(function($){
$.fn.recurse = function (_this, _parent_dropdowns ) {
_parent_dropdowns.each(function () {
$(this).mouseover(function ( event ) {
var _uls = $(this).children('ul.menu');
_uls.each( function () {
//has float-to-right class
if ($(this).hasClass('float-to-right')) {
}
});
$(this).children('ul.menu').css({ display: 'block' });
});
$(this).mouseleave( function ( event ) {
event.preventDefault();
event.stopPropagation();
_this.children('li').find('ul.menu').each( function () {
$(this).css({ display: 'none' });
});
});
_this.recurse(_this, _parent_dropdowns.find('li.dropdowns'))
});
}
$.fn.menufy = function () {
return this.each(function () {
var _parent_menu = $(this);
var _parent_dropdowns = _parent_menu.find('li.dropdown');
_parent_menu.recurse(_parent_menu, _parent_dropdowns);
});
}
})(jQuery);
jQuery(document).ready(function ($) {
$('.main-menu').menufy();
});
谢谢;)
最佳答案
像那样
(function($){
$.fn.recurse = function (_this, _parent_dropdowns ) {
_parent_dropdowns.each(function () {
$(this).mouseover(function ( event ) {
var _uls = $(this).children('ul.menu');
_uls.each( function () {
//has float-to-right class
if ($(this).hasClass('float-to-right')) {
}
});
$(this).children('ul.menu').css({ display: 'block' });
});
$(this).mouseleave( function ( event ) {
event.preventDefault();
event.stopPropagation();
_this.children('li').find('ul.menu').each( function () {
$(this).css({ display: 'none' });
});
});
_this.recurse(_this, _parent_dropdowns.find('li.dropdowns'));
});
}
$.fn.menufy = function () {
return this.each(function () {
var _parent_menu = $(this);
var _parent_dropdowns = _parent_menu.find('li.dropdown');
_parent_menu.recurse(_parent_menu, _parent_dropdowns);
});
}
})(jQuery);
jQuery(document).ready(function ($) {
$('.main-menu').menufy();
}); * {
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
}
.container {
border-bottom: #dedede 1px solid;
}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
}
.main-menu li {
float: left;
min-width: 100px;
}
.block-element li {
float: none;
display: block;
}
.float-to-right {
float: right;
}
.main-menu li ul {
display: none;
}
.main-menu > ul {
position: relative;
}
.shop{width:50%;float:left;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" id="menu-container">
<ul class="main-menu clearfix">
<li class="dropdown shop"><a href="">Shop</a>
<ul class="menu">
<li class="dropdown shop"><a href="">Filter by</a>
<ul class="menu float-to-right">
<li class="dropdown"><a href="">Products</a>
<ul class="menu block-element">
<li><a href="">Guestbooks</a></li>
<li><a href="">Notebooks</a></li>
</ul>
</li>
<li class="dropdown block-element"><a href="">Collections</a>
<ul class="menu">
<li><a href="">Handle it</a></li>
<li><a href="">Tuff Love</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contacts</a></li>
</ul>
<div class="clear"></div>
</div>关于javascript - 悬停的元素宽度会扩展，以便它可以容纳其中的所有内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36501264/