如何在引导程序下拉菜单项上添加与父项相同的宽度?
我有
的HTML是
<header class="navbar navbar-purple navbar-static-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://pos.shalvasoft.tk/"><span class="first">ShalvaSoft</span> <span class="second">POS</span></a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown langs">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<span class="caret"></span>
<span id="selectedlang"> ქართული <i class='flag-icon flag-icon-ge'></i></span>
</a>
<ul class="dropdown-menu" role="menu">
<li class="hidden"><a href="#" class="lang" data-link="ge">ქართული <i class='flag-icon flag-icon-ge'></i></a></li>
<li><a href="#" class="lang" data-link="ru">русский <i class='flag-icon flag-icon-ru'></i></a></li>
<li><a href="#" class="lang" data-link="en">English <i class='flag-icon flag-icon-us'></i></a></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
在CSS中,我尝试了这段代码
.navbar-purple .dropdown-menu { background-color: rgba(155, 89, 182,0.8); min-width:118px;padding-top: 0; padding-bottom: 0;}
.navbar-purple .dropdown-menu > li > a { color: #FFFFFF; text-align: right !important; padding: 3px 5px 3px 0;}
但是当父级下拉列表的文本使用格鲁吉亚文字时,什么也没有发生,因为其文本大小大于英语或俄语,因此我尝试使用jquery检查父级下拉列表的大小
var langwidth = $('.langs > a').width();
if(langwidth > 70) {
$('.navbar-purple .tmenu .dropdown-menu>li>a').css({
'padding-left': (100 - langwidth + 2) + 'px',
'padding-right': (100 - langwidth + 2) + 'px'
});
}
我每次都不能使用if else语句,因为该条是有歧义的,可能在将来,我需要添加新项目,因此大小不会像我需要的那样
请帮我
这是jsfiddle链接
https://jsfiddle.net/giasoft/f0zsroaj/
这是仅此菜单和1个表格的页面,因此您可以更改语言并检查其显示下拉内容的方式。
http://pos.shalvasoft.tk/login/en
多谢您日后的协助。
使用此html更新切换菜单li标签。
<li style="width:130px;" class="dropdown langs open">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<span class="caret"></span>
<span id="selectedlang"> English <i class="flag-icon flag-icon-us"></i></span>
</a>
<ul class="dropdown-menu" role="menu">
<li style="width:130px;"><a href="#" class="lang" data-link="ge">ქართული <i class="flag-icon flag-icon-ge"></i></a></li>
<li style="width:130px;"><a href="#" class="lang" data-link="ru">русский <i class="flag-icon flag-icon-ru"></i></a></li>
<li class="hidden"><a href="#" class="lang" data-link="en">English <i class="flag-icon flag-icon-us"></i></a></li>
</ul>
</li>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句