jquery - 当 li 列表是绝对的并且下拉菜单打开时,是否可以强制底部的最后一个 li 菜单内容?
问题描述
我有一个 WordPress 菜单。显示下拉菜单时出现重叠问题。我有newsletter
最后一个孩子李position: absolute
;和bottom
。
第一张截图----------------------------第二张截图
在覆盖菜单内容的第二个屏幕截图中。那么可以强制底部的内容吗?
$('body').on('click', 'ul#left-primary-menu li', function(e) {
$('ul#left-primary-menu li').find('.sub-menu').stop().slideUp();
$(this).closest('ul#left-primary-menu li').find('.sub-menu').stop().slideToggle();
});
#left-menu {
height: 100%;
width: 250px;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
background-color: #000;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
#left-menu li,
#left-menu a {
color: #fff;
font-size: 24px
}
#left-side-menu .cp-menuNewsletter,
#left-side-menu .footerSocial ul {
position: absolute;
}
#left-side-menu .cp-menuNewsletter {
bottom: 15%;
left: 25px;
}
#left-side-menu .footerSocial ul {
bottom: 60px;
}
#left-side-menu .footerSocial a {
color: #fff;
}
#left-side-menu ul ul.sub-menu {
display: none;
}
<div class="" id="left-menu">
<nav id="left-side-menu" class="main-navigation">
<div class="menu-primary-container">
<ul id="left-primary-menu" class="menu">
<li id="menu-item-1044" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1044">Menu
<ul class="sub-menu">
<li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
<li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
<li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
<li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
<li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
<li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
<li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
<li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
<li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
<li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
<li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
<li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
<li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
</ul>
</li>
<li id="menu-item-1044" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1044">Menu
<ul class="sub-menu">
<li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
<li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
<li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
</ul>
</li>
<li id="menu-item-1051" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1051">Menu
<ul class="sub-menu">
<li id="menu-item-1052" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1052"><a href="">Submenu</a></li>
<li id="menu-item-2000" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2000"><a href="">Submenu</a></li>
<li id="menu-item-1711" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1711"><a href="">Submenu</a></li>
<li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
</ul>
</li>
<li id="menu-item-1051" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1051">Menu
<ul class="sub-menu">
<li id="menu-item-1052" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1052"><a href="">Submenu</a></li>
<li id="menu-item-2000" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2000"><a href="">Submenu</a></li>
<li id="menu-item-1711" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1711"><a href="">Submenu</a></li>
</ul>
</li>
<li id="menu-item-1051" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1051">Menu
<ul class="sub-menu">
<li id="menu-item-1052" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1052"><a href="">Submenu</a></li>
<li id="menu-item-2000" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2000"><a href="">Submenu</a></li>
<li id="menu-item-1711" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1711"><a href="">Submenu</a></li>
</ul>
</li>
<li id="menu-item-1051" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1051">Menu
<ul class="sub-menu">
<li id="menu-item-1052" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1052"><a href="">Submenu</a></li>
<li id="menu-item-2000" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2000"><a href="">Submenu</a></li>
<li id="menu-item-1711" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1711"><a href="">Submenu</a></li>
<li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
</ul>
</li>
<li id="menu-item-16" class="cp-menuNewsletter smothscrollclass menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-16"><a href="" aria-current="page">Newsletter</a></li>
</ul>
</div>
<div class="footerSocial">
<div class="chw-widget">
<ul class="lsi-social-icons icon-set-lsi_widget-2">
<li class="lsi-social-facebook"><a class="" rel="nofollow" title="Facebook" aria-label="Facebook" href="#" target="_blank">Facebook</a></li>
</ul>
</div>
</div>
</nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
解决方案
您可以尝试使用 flexbox 解决方案:https ://jsfiddle.net/Sirence/9xyecdz3/1/
$('body').on('click', 'ul#left-primary-menu li', function(e) {
$('ul#left-primary-menu li').find('.sub-menu').stop().slideUp();
$(this).closest('ul#left-primary-menu li').find('.sub-menu').stop().slideToggle();
});
#left-menu {
height: 100%;
width: 250px;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
background-color: #000;
overflow-x: hidden;
transition: 0.5s;
}
#left-side-menu {
padding-top: 60px;
height: calc(100% - 60px);
display: flex;
align-content: space-between;
flex-direction: column;
}
.menu-primary-container {
flex: 1;
}
#left-primary-menu {
display: flex;
flex-direction: column;
min-height: 100%;
justify-content: flex-start;
}
#left-side-menu .cp-menuNewsletter {
margin-top: auto;
}
#left-menu li,
#left-menu a {
color: #fff;
font-size: 24px;
}
#left-side-menu .footerSocial a {
color: #fff;
}
#left-side-menu ul ul.sub-menu {
display: none;
}
<div class="" id="left-menu">
<nav id="left-side-menu" class="main-navigation">
<div class="menu-primary-container">
<ul id="left-primary-menu" class="menu">
<li id="menu-item-1044" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1044">Menu
<ul class="sub-menu">
<li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
<li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
<li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
<li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
<li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
<li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
<li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
<li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
<li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
<li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
<li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
<li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
<li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
<li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
</ul>
</li>
<li id="menu-item-1044" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1044">Menu
<ul class="sub-menu">
<li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
<li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
<li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
</ul>
</li>
<li id="menu-item-1051" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1051">Menu
<ul class="sub-menu">
<li id="menu-item-1052" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1052"><a href="">Submenu</a></li>
<li id="menu-item-2000" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2000"><a href="">Submenu</a></li>
<li id="menu-item-1711" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1711"><a href="">Submenu</a></li>
<li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
</ul>
</li>
<li id="menu-item-1051" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1051">Menu
<ul class="sub-menu">
<li id="menu-item-1052" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1052"><a href="">Submenu</a></li>
<li id="menu-item-2000" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2000"><a href="">Submenu</a></li>
<li id="menu-item-1711" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1711"><a href="">Submenu</a></li>
</ul>
</li>
<li id="menu-item-1051" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1051">Menu
<ul class="sub-menu">
<li id="menu-item-1052" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1052"><a href="">Submenu</a></li>
<li id="menu-item-2000" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2000"><a href="">Submenu</a></li>
<li id="menu-item-1711" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1711"><a href="">Submenu</a></li>
</ul>
</li>
<li id="menu-item-1051" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1051">Menu
<ul class="sub-menu">
<li id="menu-item-1052" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1052"><a href="">Submenu</a></li>
<li id="menu-item-2000" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2000"><a href="">Submenu</a></li>
<li id="menu-item-1711" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1711"><a href="">Submenu</a></li>
<li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
</ul>
</li>
<li id="menu-item-16" class="cp-menuNewsletter smothscrollclass menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-16"><a href="" aria-current="page">Newsletter</a></li>
</ul>
</div>
<div class="footerSocial">
<div class="chw-widget">
<ul class="lsi-social-icons icon-set-lsi_widget-2">
<li class="lsi-social-facebook"><a class="" rel="nofollow" title="Facebook" aria-label="Facebook" href="#" target="_blank">Facebook</a></li>
</ul>
</div>
</div>
</nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
推荐阅读
- angular - 我想从列表 angular 6 中搜索数据
- asp.net-core - 30 分钟后,asp.net 核心身份中缺少其他声明
- laravel - 如果使用 VUE JS 在 s3 中不存在图像,如何设置默认图像
- vue.js - 在vue中加载dom时如何获取dom的高度?
- python - 关于opencv-python 3.4.3
- r - Biostrings::getPromoterSeq 返回查询基因 ID 的多个序列
- reactjs - React TS - 向上传递组件树
- c# - 将 C# Translate Text API 代码从异步转换为 SQL Server CLR 函数的同步
- tuples - 如何在水晶语言的宏中使用构造函数创建一个元组
- assembly - MIPS ASSEMBLY,打印值,突然中断