jQuery从页脚导航栏中删除按钮

时间:2016-01-02 10:01:44

标签: jquery-mobile

使用jQueryMobile 1.4.5,我需要打开和关闭中间按钮的存在,以便在中间按钮消失时,其他2个按钮相互对接。
我的js脚本使它消失但在两个按钮之间留出空间 怎么能实现这一目标?感谢

enter image description here



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;
&#13;
&#13;

1 个答案:

答案 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 -->