Question

我正在尝试创建一个TABBED复选框，除了手机外，一切正常。在手机上，点击其中一个标签后，它什么也没做，但是如果我按下方向，那么它会正确显示。谁能帮帮我吗。如果它很重要，我正在测试旧手机的兼容性，Android 4.4.2。

这是一个包含代码的codepen： http://codepen.io/lepew/pen/Ppqwez

    <div id="sign_Page">
    <br/>
    Please select "REGISTER" for new applicants, "LOGIN for current hello users and "FORGOT" if you need your password reset.
    <br/>
    <br/>
    <div class="sign_Area">
        <input type="radio" name="tabGroup1" id="rad1" class="tab1"/>
        <label for="rad1">REGISTER</label>
        <input type="radio" name="tabGroup1" id="rad2" class="tab2" checked="checked"/>
        <label for="rad2">LOGIN</label>
        <input type="radio" name="tabGroup1" id="rad3" class="tab3"/>
        <label for="rad3">FORGOT</label>
        <div class="tab1"><!-- REGISTER -->
            <div class="sign_Case">
                SIGNUP
                <br/>
                <br/>
                SUMBIT
            </div><!-- end of #sign_Case -->
        </div><!-- end of TAB1 -->
        <div class="tab2"><!-- LOGIN -->
            <div class="sign_Case">
                LOGIN
                <br/>
                <br/>
                SUMBIT
            </div><!-- end of #sign_Case -->
        </div><!-- end of TAB1 -->
        <div class="tab3"><!-- FORGOT -->
            <div class="sign_Case">
                EMAIL
                <br/>
                <br/>
                SUMBIT
            </div><!-- end of #sign_Case -->
        </div><!-- end of TAB1 -->
        <br/>
        <br/>
    </div><!-- end of #sign_Area -->
</div><!-- end of #sign_Page -->

Answer 1

强制在方向更改引起的移动设备上重新流动。这些是脚本，但你可能会这样做......

someelement.style.display='none';
someelement.offsetHeight; // no need to store this anywhere, the reference is enough
someelement.style.display='';

可选timeout为0会触发重排，就像查询offsetHeight一样：

sel.style.display = 'run-in'; 
setTimeout(function () { sel.style.display = 'block'; }, 0);

标签式复选框无法在移动设备

1 个答案: