[英]Manipulate Bootstrap navbar elements using jquery
我想做的是將<li>
元素從導航欄隱藏到調整大小的下拉菜單中。
我嘗試了,但我以這個錯誤的菜單告終。 http://i.imgur.com/1uJ7hbG.gif
這是js:
$().ready(function () {
//we reconstruct menu on window.resize
$(window).on("resize", function (e) {
var parentWidth = $("#normal").parent().width() - 40;
var ulWidth = $(".menutohide").outerWidth();
var menuLi = $("#normal > li");
var liForMoving = new Array();
//take all elements that can't fit parent width to array
menuLi.each(function () {
ulWidth += $(this).outerWidth();
if (ulWidth > parentWidth) {
console.log(ulWidth);
liForMoving.push($(this));
}
});
if (liForMoving.length > 0) { //if have any in array -> move em to "more" ul
e.preventDefault();
liForMoving.forEach(function (item) {
item.clone().appendTo(".links-hidden");
item.remove();
});
}
else if (ulWidth < parentWidth) { //check if we can put some 'li' back to menu
liForMoving = new Array();
var moved = $(".links-hidden > li");
for (var i = moved.length - 1; i >= 0; i--) { //reverse order
var tmpLi = $(moved[i]).clone();
tmpLi.appendTo($("#normal"));
ulWidth += $(moved[i]).outerWidth();
if (ulWidth < parentWidth) {
$(moved[i]).remove();
}
else {
ulWidth -= $(moved[i]).outerWidth();
tmpLi.remove();
}
}
}
if ($(".links-hidden > li").length > 0) { //if we have elements in extended menu - show it
$(".menutohide").show();
}
else {
$(".menutohide").hide();
}
});
$(window).trigger("resize"); //call resize handler to build menu right
});
這是html:
<nav class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav" id="normal">
<li><a href="#" class="first-child">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Twitch Live</a></li>
<li class="disabled"><a href="#">Ranking</a></li>
</ul>
<ul class="nav navbar-nav menutohide">
<li class="dropdown hidden-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true">
<i class="fa fa-bars fa-fw"></i>
</a>
<ul class="dropdown-menu links-hidden" role="menu">
<!--Hidden links here-->
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<h6 class="hidden-xs">Bambini</h6>
<img src="http://placehold.it/250x250/000000"/>
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Account info</a></li>
<li><a href="#">Logoff</a></li>
</ul>
</li>
</ul>
</nav>
我認為您可以使用CSS @media
查詢來完成此操作。 只需提供任何您想要隱藏的ID即可,然后可以使用display: none
來隱藏它。
@media (max-width: 767px) {
#contact-nav-link {
display: none;
}
}
這是一個JSFiddle-表示“聯系人”的<li>
元素將顯示在導航欄中,但是當調整窗口大小(導航欄折疊)時,它將從下拉列表中消失。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.