2016-01-02 42 views
1

使用jQueryMobile 1.4.5,我需要打開和關閉中間按鈕的存在,以便其他2個按鈕可以互相碰撞(如果中間按鈕不存在)。
我的js腳本讓它消失,但在掉落的2個按鈕之間留下空間。
這是如何實現的?由於jQuery從頁腳導航欄中刪除按鈕

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

回答

1

目前沒有JQM方法刷新導航欄。希望我們得到一個1.5 ...

但你可以操縱導航欄的「網格類」。
我認爲這是最簡單的方法,如果你只想添加/刪除一個按鈕。

\t $('#toggle').on("click", function() { 
 
\t if ($("#navbar > ul").hasClass('ui-grid-b')) { 
 
\t  $("#extra").hide(); 
 
\t  $("#navbar > ul").removeClass('ui-grid-b').addClass('ui-grid-a') 
 
\t  .find("li").last().removeClass('ui-block-c').addClass("ui-block-b"); 
 
\t } else { 
 
\t  $("#extra").show(); 
 
\t  $("#navbar > ul").removeClass('ui-grid-a').addClass('ui-grid-b') 
 
\t  .find("li").last().removeClass('ui-block-b').addClass("ui-block-c"); 
 
\t } 
 
\t });
<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 -->