当我使用 .show() 和 .hide() 时，jQuery 移动按钮会变形

Question

当我在 jQuery Mobile 中的按钮上使用 .hide() 时，最初它会隐藏该按钮。当我在其上使用 .show() 属性时，用户界面会变形。不知何故，类似于 .listview('refresh') 的 .button('refresh') 不起作用。

我在 jsfiddle link 中重新创建了该错误

$('#page1').live('pageshow', function () {
    $("#showbtn1").click(function(){
       $("#btn1").show();
       $("#btn2").hide();
       $.mobile.changePage("#page2");        
    });
    $("#showbtn2").click(function(){
       $("#btn1").hide();
       $("#btn2").show();
       $.mobile.changePage("#page2");     
    });    
});    

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" rel="stylesheet"/>

<div id="page1" data-role="page">

    <div data-role="header">
        <a href="#" data-role="button" data-icon="back" data-iconpos="notext" data-rel="back"></a> 
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <p>To recreate the bug <p>
        <p> 1.click on show button 1 </p>
        <p> 2.click back </p>
        <p> 3.click on show button 2 </p>
        <p> 4.button is distorted </p>
            
        <a id="showbtn1"  href="#" data-role="button">show only button 1</a>
         <a id="showbtn2" href="#" data-role="button">show only button 2</a>           
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
    
<div id="page2" data-role="page">

    <div data-role="header">
        <a href="#" data-role="button" data-icon="back" data-iconpos="notext" data-rel="back"></a> 
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <a id="btn1" href="#" data-role="button">button 1</a>
        <a id="btn2" href="#" data-role="button">button 2</a>        
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

感谢任何帮助。

谢谢。

Answer 1

show() 和 hide() 方法添加了“display: none”属性，该属性创建了类似从 DOM 中删除按钮的效果。相反，请尝试使用 css("visibility","visible") 和 "hidden"，这样只会不可见且不会变形。