如何使导航栏（Jquery Mobile）自底向上子菜单的css自动化？_Css_Jquery Mobile

如何使导航栏（Jquery Mobile）自底向上子菜单的css自动化？

css jquery-mobile

如何使导航栏（Jquery Mobile）自底向上子菜单的css自动化？,css,jquery-mobile,Css,Jquery Mobile,我修改了JQuery Mobile导航栏，以显示自底向上的导航菜单（而不是标准的下拉菜单）。正如您从代码中看到的，我必须为每个li节点手动编写css。例如，底部：100%，底部：200%，宽度：25%等。。。这是工作，但有没有办法修改这个css，并创建自动底部和宽度计算时，添加子菜单 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device

我修改了JQuery Mobile导航栏，以显示自底向上的导航菜单（而不是标准的下拉菜单）。正如您从代码中看到的，我必须为每个li节点手动编写css。例如，底部：100%，底部：200%，宽度：25%等。。。这是工作，但有没有办法修改这个css，并创建自动底部和宽度计算时，添加子菜单

 <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>

    <style type="text/css">


    #pageone > div.ui-content
    {
      padding-top:200px;
    }

    #pageone > div.ui-content > div > ul > li.ui-block-d > ul:nth-child(4)
    {
        bottom: 300%;
        position:absolute;
        width:25%;


     }

    #pageone > div.ui-content > div > ul > li.ui-block-d > ul:nth-child(3)
    {
        bottom: 200%;
        position:absolute;
        width:25%;


     }
    #pageone > div.ui-content > div > ul > li.ui-block-d > ul:nth-child(2)
    {
         bottom: 100%;
         position:absolute;
         width:25%;

    }

    </style>

    </head>
    <body>

    <div data-role="page" id="pageone">
      <div data-role="header">
        <h1>Welcome To My Homepage</h1>

      </div>
    </br>
        </br>
        </br>
        </br>
        </br>
      <div data-role="main" class="ui-content">
        <div data-role="navbar">

          <ul>
               <li><a href="#" data-icon="plus">Btn1</a></li>
                 <li><a href="#" data-icon="plus">Btn2</a></li>
                  <li><a href="#" data-icon="plus">Btn3</a></li>
               <li><a href="#" data-icon="minus">More</a>
                 <ul>
                   <li><a href="#" data-icon="minus">Test 1</a>
                 </ul>
                 <ul>
                   <li><a href="#" data-icon="minus">Test 2</a>
                 </ul>
                  <ul>
                   <li><a href="#" data-icon="minus">Test 3</a>
                 </ul>
               </li>

          </ul>

        </div>

      </div>

    </div> 

    </body>
    </html>


#pageone>div.ui-content
{
填充顶部：200px；
}
#pageone>div.ui-content>div>ul>li.ui-block-d>ul:n个子项（4）
{
底部：300%；
位置：绝对位置；
宽度：25%；
}
#pageone>div.ui-content>div>ul>li.ui-block-d>ul:n个子项（3）
{
底部：200%；
位置：绝对位置；
宽度：25%；
}
#pageone>div.ui-content>div>ul>li.ui-block-d>ul:n个子项（2）
{
底部：100%；
位置：绝对位置；
宽度：25%；
}
欢迎来到我的主页

使用javascript/jQuery，通过循环项目和设置CSS来实现这一点非常容易

为了方便起见，我给了导航栏一个导航栏的id。在下面的函数中，我们首先获取顶级导航项目

$（“#theNavbar>ul>li”）

。我们找到的任何子菜单的宽度（以百分比表示）将被100除以项目数。接下来，我们遍历所有顶级项，看看是否找到子菜单项

$（this.find（“ul”）

）。如果我们这样做，我们将循环子菜单项并设置它们的CSS。每个项的底部css计算为该项的索引加1（基于0的索引）乘以100

$(document).on("pagecreate", "#pageone", function(){
    var navItems = $("#theNavbar > ul > li");
    var subWidth = 100 / navItems.length;
    $("#theNavbar > ul > li").each(function( index ) {
        $(this).find("ul").each(function(i) {
            var bottom = (i + 1) * 100;
            $(this).css({"position": "absolute", 
                         "width": subWidth + "%",
                         "bottom": bottom + "%"});
        });
    });    
});

这里有一个

尝试一些响应性强的框架，比如Yahoo！Pure、Twitter引导等。感谢您的帮助：）