JQuery移动页脚项不在一行显示

JQuery Mobile Footer items not displaying in 1 row

本文关键字：一行 显示 移动 JQuery      更新时间：2023-09-26

大家好，使用JQuery来隐藏列表项的溢出，它工作得很好，但我显示的是每2行而不是所有在同一行的项目。

有人知道它为什么会这样吗?

下面是完整的源代码:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head> 
<body> 
<div data-role="page">
    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->
    <div data-role="content">   
        <p>Page content goes here.</p>      
    </div><!-- /content -->
    <div data-role="footer">
        <div data-role="navbar">
            <ul class="footeritems">
                <li><a href="#" data-icon="grid" data-iconpos="top">One</a></li>
                <li><a href="#" data-icon="grid" data-iconpos="top">Two</a></li>
                <li><a href="#" data-icon="grid" data-iconpos="top">Three</a></li>
                <li><a href="#" data-icon="grid" data-iconpos="top">Four</a></li>
                <li><a href="#" data-icon="grid" data-iconpos="top">Five</a></li>
                <li><a href="#" data-icon="grid" data-iconpos="top">Six</a></li>
                <li><a href="#" data-icon="grid" data-iconpos="top">Seven</a></li>
            </ul>
        </div>
    </div><!-- /footer -->
</div><!-- /page -->

<script>
$(document).ready(function() {
     $("ul.footeritems li:gt(3)").remove();
     $("ul.footeritems").listview('refresh');
});
</script>
</body>
</html>

这是因为jquery移动CSS支持页脚导航栏每行最多有5个列表项。如果有更多的项目，它将它分成更多的行。删除任何一个列表项，它将出现在一个单独的行

相关文章：