使用jQueryMobile 1.4.5,我需要打开和关闭中间按钮的存在,以便在中间按钮消失时,其他2个按钮相互对接。
我的js脚本使它消失但在两个按钮之间留出空间
怎么能实现这一目标?感谢
jQuery.fn.invisible = function() {
return this.css('visibility', 'hidden');
};
jQuery.fn.visibilityToggle = function() {
return this.css('visibility', function(i, visibility) {
return (visibility == 'visible') ? 'hidden' : 'visible';
});
};
$("li:nth-child(2)").invisible();

<footer data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><button type="submit" data-theme="c">NO</button></li>
<li><button type="submit" data-theme="c">EXTRA</button></li>
<li><button type="submit" data-theme="c">YES</button></li>
</ul>
</div>
</footer><!-- footer -->
&#13;
答案 0 :(得分:1)
目前还没有刷新导航栏的jqm方法。希望我们得到一个1.5 ...
但是你可以操纵导航栏的“网格类” 我认为如果您只想添加/删除一个按钮,这是最简单的方法。
$('#toggle').on("click", function() {
if ($("#navbar > ul").hasClass('ui-grid-b')) {
$("#extra").hide();
$("#navbar > ul").removeClass('ui-grid-b').addClass('ui-grid-a')
.find("li").last().removeClass('ui-block-c').addClass("ui-block-b");
} else {
$("#extra").show();
$("#navbar > ul").removeClass('ui-grid-a').addClass('ui-grid-b')
.find("li").last().removeClass('ui-block-b').addClass("ui-block-c");
}
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<button id="toggle">Toggle</button>
<footer data-role="footer" data-position="fixed">
<div data-role="navbar" id="navbar">
<ul>
<li>
<button type="submit" data-theme="c">NO</button>
</li>
<li id="extra">
<button type="submit" data-theme="c">EXTRA</button>
</li>
<li>
<button type="submit" data-theme="c">YES</button>
</li>
</ul>
</div>
</footer>
<!-- footer -->