Question

很抱歉，如果标题令人困惑，因为我找不到适合自己问题的标题。但我肯定知道自己要实现的目标。

如果您查看http://applearn.tv/的下拉列表，那么您可以在鼠标悬停时看到下拉列表正在改变它的方向，即如果鼠标悬停在第一个菜单上，则div将从右向左显示，而最后一个菜单则从左侧显示对。目前这是静态的，但我想用jquery得到同样的概念。

对不起，我没有这个jsfiddle。

如果有任何教程或小提琴，请告诉我。

谢谢。

Answer 1

您可以通过检查窗口宽度，下拉框宽度和放大来找出下拉框的位置。导航项位置左侧

你可以尝试这个逻辑，当前导航的id左边坐标出现在窗口的左半部分然后应用float：left else apply float：right

代码：

    $('.navLink').click(showNavigation);

    function showNavigation() {

        var navigationItem = $(this);//Assuming this is anchor tag
        var holderItem = navigationItem.next('div.navigationItem');
        var windowWidth = $(window).width();
        var navigationLeft = navigationItem.offset().left;

        //Find current position, if this is greater than half of window width then apply float:left else float:right
        var currentPosition = (windowWidth - navigationLeft) + navigationItem.width();

        //class float_left_class stands of float:left and class float_rght_class stands for float:float_rght_class
        var holderClass = (currentPosition > windowWidth / 2) ? 'float_left_class' : 'float_rght_class';

        //remove previosly added class and add new class
        holderItem.removeClass('float_left_class float_rght_class').addClass(holderClass);

        //then show holder item
        holderItem.show();
    }

风格：

.float_left_class{
    float:left;
}

.float_rght_class{
    float:right;
}
.navigationItem{
    display:none;
}

HTML：

<ul>
    <li>
        <a href="#" class="navLink">Navigation 1 </a>
        <div class="navigationItem">Detail</div>
    </li>
</ul>

根据父div的宽度左右浮动div

1 个答案: