Question

我修改了JQuery Mobile NAVBAR以显示自下而上的导航菜单（而不是标准的下拉菜单）。从代码中可以看出，我不得不为每个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>

enter image description here

Answer 1

通过循环遍历项目和设置CSS，使用javascript / jQuery很容易做到这一点。

为方便起见，我给导航栏指定了导航栏的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 + "%"});
        });
    });    
});

这是 DEMO

如何使用navbar（Jquery Mobile）自动向下的子菜单css？

1 个答案: