检查引导程序崩溃导航栏是否溢出

debugcn 发表于 Dev

维诺利

我如何使用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!!");
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。