我修改了 JQuery Mobile NAVBAR 以显示自下而上的导航菜单(而不是标准的下拉菜单)。从代码中可以看出，我不得不为每个 li 节点手动编写 css。例如，bottom:100% 、bottom:200%、width: 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>
最佳答案
通过遍历元素和设置 CSS，使用 javascript/jQuery 很容易做到这一点。
为方便起见，我为导航栏指定了 theNavbar 的 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 + "%"});
});
});
});
Here is a DEMO
关于css - 如何使 navbar (Jquery Mobile) 自下而上子菜单的 css 自动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21962418/