我在一个基于Bootstrap和jQuery的项目中有一个多级菜单。除了一件事情之外，一切都正常：当菜单项被放置得太靠右时，它的子菜单会超出页面并且无法阅读（如从jsFiddle截图所示）：
有没有办法检测子菜单（打开时）是否超出页面限制，如果超出，则将其放置在其父元素的另一侧？
到目前为止，我的代码是：
HTML：
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">LOGO HERE!</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="/">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Blog <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Categories</a></li>
<li><a href="#">Blog Post</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Search Engines</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Google</a>
<ul class="dropdown-menu">
<li><a href="https://adwords.google.com" target="_blank">Google Adwords</a></li>
<li><a href="https://analytics.google.com" target="_blank">Google Analytics</a></li>
<li><a href="https://www.google.com/webmaster/" target="_blank">Webmaster Tools</a></li>
</ul>
</li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.msn.com">MSN</a></li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li><a href="#">All Tags</a></li>
</ul>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
CSS：
.dropdown-menu>li>a:hover{
background-color:rgba(216,216,216,1);
background-image:none;
color:#000;
}
.divider{
background-color:#fff;
}
.dropdown-submenu{
position:relative;
}
.dropdown-submenu>.dropdown-menu{
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu>a:after{
display:block;
content: " ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style: solid;
border-width:5px 0 5px 5px;
border-left-color: #cccccc;
margin-top:5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after{
border-left-color: #555;
}
.dropdown-submenu.pull-left{
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu{
left:100%;
margin-left:1-0px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
JS：
$(document).ready(function(){
$('a[data-toggle=dropdown]').on('click', function(e){
//$(this).next('ul').show();
//console.log('click');
e.stopPropagation();
e.preventDefault();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
if($('.dropdown-menu').hasClass('open')){
console.log('visible');
}
});
这里有一个测试代码的网站：https://jsfiddle.net/311mcf23/，希望能对你有所帮助。
感谢您的阅读。