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

Question

抱歉，如果标题令人困惑，因为我找不到适合我的问题的标题。但我绝对知道我想要实现的目标。

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

对不起，我没有这个jsfiddle。

请让我知道是否有任何类型的教程或小提琴。

谢谢你。

Answer 1

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

你可以试试这个逻辑，当前导航的 id 左坐标出现在窗口的左半边，然后应用 float:left 否则应用 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>