Question

我有一个使用jQuery的动态下拉菜单，其中主导航链接的数量取决于CMS。如果下拉容器接触到网站的包装，然后它翻转侧面并且右对齐，那么主网页容器外面是否没有溢出？请参阅http://online.wsj.com/home-page作为示例。

修改

这是代码。

<script>
$("ul#navBar li span").click(function() { //When trigger is clicked...
        //caching selectors
        var $this = $(this),
        $parent = $this.parent(),
        $siblings = $parent.siblings(),
        $dropdowns_siblings = $siblings.find('.dropdown');

        $this.next().toggle(); //toggles the dropdown on click

        //hide other menus if visible
        $dropdowns_siblings.hide();


        function rowWidth(){    
            //Calculate width of ul
            var rowWidth = 0;       
            $parent.find("ul").each(function() {rowWidth += $(this).width(); });    

            //Set width of .dropdown
            $parent.find(".dropdown").css({'width' : rowWidth});
            };
        return rowWidth();
</script>

<div id="container">
 <ul id="navBar">
    <li><a href="/">Link 1</a> <span></span>
        <div class="dropdown">
            dynamic # of cols
        </div>
    </li>
<li><a href="/">Link 1</a> <span></span>
        <div class="dropdown">
            dynamic # of cols
        </div>
    </li>
<li><a href="/">Link 1</a> <span></span>
        <div class="dropdown">
            dynamic # of cols
        </div>
    </li>
<li><a href="/">Link 1</a> <span></span>
        <div class="dropdown">
            dynamic # of cols
        </div>
    </li>
 </ul>

</div>

Answer 1

您可以使用jQuery.fn.offset进行比较，看看jQuery(window).width()是否大于该偏移的left组件与菜单宽度的总和，如果不是，则菜单被裁剪，然后更新菜单的位置以使自己与按钮的另一边缘（或菜单触发器）等对齐。当窗口获得resized或者如果有的话，您将绑定此功能水平scrolling。很抱歉，如果这个级别太高而且示例代码不够，但它应该足以让您入门。

...

我已用an example on JSFiddle解决了您的问题。我认为这就是你要找的东西。我已经从原始代码中填充了大量缺少的CSS，并使用一些非IE CSS选择器来节省时间。我还重写了大部分的js。绝对有改进的空间，但效果很好。当窗口调整大小时，我也没有绑定它来调整实时，但我认为与点击绑定相比，这更像是一个边缘情况。

动态下拉菜单切换方向

1 个答案: