Question

我正在尝试创建一个子菜单。但是jQuery UI的position（）函数并没有将子菜单放在正确的位置（菜单项的右侧）。子菜单看起来像被剪裁了。

<script>
    $(function() {
        $('.menu').hide();

        $('#action').on('mouseenter', function() {
            var menu = $('#menu');
            menu.show();
            menu.position({
                of: this,
                my: 'left top',
                at: 'left bottom'
            });
        });

        $('.menuItem').on('mouseenter', function() {
            var menu = $(this).find('.menu');
            menu.show();
            menu.position({
                of: this,
                my: 'left top',
                at: 'right top'
            });
        });
    });
</script>

<button id="action">Action</button>
<div id="menu" class="menu">
    <div class="menuItem">
        <span>Item1</span>
    </div>
    <div class="menuItem">
        <span>Item2</span>
    </div>
    <div class="menuItem">
        <span>Item3</span>
        <div class="menu">
            <div class="menuItem">
                <span>Item4</span>
            </div>
            <div class="menuItem">
                <span>Item5</span>
            </div>
            <div class="menuItem">
                <span>Item6</span>
            </div>
        </div>
    </div>
</div>

感谢您的帮助！

Answer 1

问题在于你的css

.menu{ border: 1px solid #333;display:inline-block;wdth:100%;position:absolute;}
.menuItem{ border: 1px solid red;}

上面像css一样appky并检查这个小提琴的答案。

http://jsfiddle.net/2xxy3acx/

jQuery子菜单 - position（）不起作用

1 个答案: