动态下拉菜单切换方向

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 分量与菜单宽度的总和，如果不是并且菜单被裁剪，则更新菜单的位置以对齐本身与按钮（或菜单触发器）的另一边缘等。您可以将此函数绑定为在窗口获取 调整大小或者是否存在水平滚动。很抱歉，如果这太高级并且没有足够的示例代码，但它应该足以让您开始。

...

我已经用 JSFiddle 上的示例解决了您的问题。我想这就是你要找的。我已经从您的原始代码中填充了许多缺失的 CSS，并使用了一些非 IE CSS 选择器来节省时间。我还重写了大部分js。肯定还有改进的空间，但效果很好。当窗口调整大小时，我也没有将其绑定为实时调整，但我认为与单击绑定相比，这更像是一种边缘情况。