Question

我用下拉菜单创建菜单，问题是我的一个li元素在2行，我想自动设置每个li元素的宽度在1行显示这是我用jquery的尝试

<ul id='navigation'>
    <li class="menu-item><a href="#">Services</a>
        <ul class="DropMenu">
            <li><a href="#">Membres1</a></li>
            <li><a href="#">Membres222222222222222</a></li>
            <li><a href="#">Membres3</a></li>
        </ul>
    <li>
</ul>
<script type="text/javascript">
    $(document).ready(function(){
    var height_dropdown = $('#navigation li ul').css( "height" );
    if (height_dropdown>47) {
        $('#navigation li ul').css( "width" )=260;
    }
    });
</script>

Answer 1

<script type="text/javascript">
    $(document).ready(function(){
    var height_dropdown = $('#navigation li ul').height();
    if (height_dropdown>47) {
        $('#navigation li ul.DropMenu').css( "width","260px");
    }
    });
</script>

Answer 2

尝试按如下方式替换脚本部分：

<script type="text/javascript">
    $(document).ready(function(){
    if ($('#navigation li ul').height()>47) {
        $('#navigation li ul.DropMenu').css( "width","260px");
    }
    });
</script>

Answer 3

这应该有效

 jQuery(window).load(function(){
        var main_menu = jQuery('#navigation');
            main_menu.each(function(){
            var li_main = jQuery(this).find('li');
                li_main.each(function(){
                    var dropdown = jQuery(this).find('ul');
                    dropdown.each(function(){
                        var li = jQuery(this).find('li');
                        li.each(function(){
                            var current = jQuery(this);
                            console.log(current);
                            if ((current.height() >= 47))
                                dropdown.css('width','260px');
                        }); 
                    });
                });
            });
        });

控制下拉的高度

3 个答案: