Кнопка jQuery на мобильном телефоне искажается при использовании .show () и .hide ()

Question

Когда я использую .hide () на кнопке в jQuery mobile, изначально она скрывает кнопку. когда я использую свойство .show (), пользовательский интерфейс искажается. Каким-то образом .button («обновить»), аналогичный .listview («обновить»), не работает.

Я воссоздал ошибку в 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 («видимость», «видимый») и «скрытый», которые сделают просто невидимым и без искажений.

Answer 2

После неудачи с видимостью (из-за проблем с позиционированием) единственное решение, с которым я столкнулся, работало без сбоев, - это создать класс CSS, а затем добавить / удалить его, чтобы скрыть / показать его:

$('.hide_me').addClass("vanish");
$('.show_me').removeClass("vanish");

и css:

.vanish {
  display: none;
}

Answer 3

Попробуйте исправить несбалансированный тег <p>

HTML:

<p>To recreate the bug <p>
<p>To recreate the bug </p>