gpt4 book ai didi

jquery - 检查 Bootstrap 折叠导航栏是否溢出

转载 作者:行者123 更新时间:2023-11-28 05:18:51 25 4
gpt4 key购买 nike

我如何使用 jQuery 检查导航栏(灰色 div)在折叠时是否溢出(滚动条)?看我的例子,当我展开一个子菜单时,导航栏的滚动条将被启用,因为 div 的内容已经溢出。我想在导航栏底部放置一个带有“更多”标签的 div,让用户知道有更多内容并且他们可以向下滚动。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<nav class="website-nav navbar navbar-default navbar-fixed-top">
<div class="navbar-inner">
<div class="nav-center">

<!-- <img src="{{ S_WEB_PATH }}images/brand.png" /> -->
<div class="nav-brand"></div>
</div>
</div>
<div class="alt-nav navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toogle Navigation</span>
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<a class="navbar-brand" href="https://www.example.com/">LOGO</a>
</div>
<!-- Navigation header -->
<div class="collapse navbar-collapse" id="collapse">

<ul class="nav navbar-nav">
<li {{ INDEX_ACTIVE }}><a href="https://www.example.com/"><span></span> Menu1 <span class="sr-only">(current)</span></a></li>

<li class="visible-xs "><a href="https://www.example.com/?secao=meuPainel"><span></span> Menu2</a></li>

<li class="dropdown">
<a href="?secao=minhaConta" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span></span> Menu3<span class="caret"></span></a>
<ul class="dropdown-menu">

<li class="hidden-xs "><a href="https://www.example.com/?secao=meuPainel"><span ></span> Submenu3.1</a></li>

<li class=""><a href="https://www.example.com/?secao=meusPedidos"><span></span> Submenu3.2</a></li>

<li class="visible-xs "><a href="https://www.example.com/?secao=meusPedidos" style="display:none;"><span></span> Token</a></li>
<li role="separator" class="divider visible-sm visible-xs"></li>
<li ><a href="https://www.example.com/?secao=minhaConta"><span></span>Submenu3.3</a></li>
<li><a href="https://www.example.com/?secao=interesses"><span></span> Submenu3.4</a></li>
<li><a href="https://www.example.com/?secao=alterarSenha"><span></span> Submenu3.5</a></li>
<li><a href="https://www.example.com/?secao=alterarEmail"><span></span> Submenu3.6</a></li>
<li role="separator" class="divider"></li>
<li><a href="https://www.example.com/?acao=sair"><span></span>Submenu3.7</a></li>
</ul>
<li class="visible-md "><a href="https://www.example.com/?secao=meusPedidos"><span></span> Menu4</a></li>
</li>
<li {{ REMOTE_ACTIVE }} ><a href="https://www.example.com/?secao=meuCarrinho"><span></span> Menu5
</a></li>




</ul>
<ul class="nav navbar-nav navbar-right">

<li ><a href="https://www.example.com/?secao=notificacoes"><span></span> Menu6 </a></li>

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span></span> Menu7<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="https://www.example.com/en/"> Submenu 7.1</a></li>
<li role="separator" class="divider"></li>
<li><a href="https://www.example.com/es/"> Submenu 7.2</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="https://www.example.com/"> Submenu 7.3</a>
</li>

</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span></span> Menu8<span class="caret"></span>&nbsp;</a>
<ul class="dropdown-menu">
<li><a href="https://www.example.com/sac">Submenu 8.1</a></li>
<li><a href="https://www.example.com/sac">Submenu 8.2</a><a href="https://www.example.com/?secao=FAQ"></a></li>
<li role="separator" class="divider"></li>
<li><a href="https://www.example.com/sac">Submenu 8.3</a></li>
<li style="display:none;"><a href="https://www.example.com/?secao=carreiras">Trabalhe conosco</a></li>
<li style="display:none;"><a href="https://www.example.com/?secao=comercial">Seja um parceiro</a></li>
<li id="navbar-bottom" name="navbar-bottom"></li>
</ul>
</li>
</ul>
</div>
</nav>
<div style="height:1000px; background-color:yellow"> some content</div>

最佳答案

请用一些 id 命名导航栏 div。然后您可以使用以下代码简单地检查滚动宽度以查看 div 是否溢出:

if ($("#navBarDiv").prop('scrollWidth') > $("#navBarDiv").width() ) {
alert("this element is overflowing !!");
}
else {
alert("this element is not overflowing!!");
}

关于jquery - 检查 Bootstrap 折叠导航栏是否溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39167069/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com