javascript - 标签难以点击

Question

我有一个选项卡要显示在窗口的左下角，但似乎很难使其真正可点击(而且 iframe 不可点击)，因此它在手机上不执行任何动画甚至网络浏览器。

http://jsfiddle.net/bo9gy77q/3/

我该如何修复这个错误？在控制台中显示:Uncaught ReferenceError:$未定义。单击移动浏览器上的选项卡并使 iframe 可单击时出现问题吗？

注意:选项卡中有一个 iframe，所以我还需要它可点击，到目前为止我还没有尝试修复它。

注意:难以点击特别指的是旧的移动设备和safary。(很难让它在这些设备上工作)

我可以让可点击区域更大吗？

Answer 1

看看这个 fiddle ，动画现在运行良好且流畅:http://jsfiddle.net/bo9gy77q/2/ 我刚刚从“#a-tab”类中删除了过渡属性，并且平滑度就在那里

$("#a-tab,#a-tab *").click(function () {
    //$("#a-tab").focus();
    $("#a-tab").animate({
        width: '320px'
    }, "fast");
    $(".deluxe").animate({
        width: '30px'
    }, "slow");
})
$("#a-tab").on('focusout', function () {
    $("#a-tab").animate({
        width: '10px'
    }, "fast");
    $(".deluxe").animate({
        width: '5px'
    }, "fast");
});

#a-tab:focus {
    outline:none;
    width:340px;
}
.deluxe {
    position: relative;
    background:#999;
    width:5px;
    height:108px;
}
#a-tab {
    background:#FFF;
    border:solid #d9d9d9 2px;
    position: fixed;
    bottom: 12px;
    right: -20px;
    z-index: 5;
    width: 30px;
    height: 112px;
    padding: 5px 20px 5px 5px;
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="a-tab" tabindex="1">
    <table>
        <tbody>
            <tr>
                <td>
                    <div class="deluxe"></div>
                </td>
                <td></td>
                <td>
                    <div class="g-page" data-width="273" data-href="//plus.google.com/u/0/111125806825828710565" data-layout="landscape" data-rel="publisher"></div>
                </td>
            </tr>
        </tbody>
    </table>
</div>