标签很难点击

Question

我有一个选项卡显示在窗口的左下角，但它似乎很难使它实际上可点击(也是iframe是不可点击的)，所以它不做任何动画手机，甚至网页浏览器。

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

我怎么才能治好这个错误？控制台上写着：Uncaught ReferenceError: $ is not defined。点击移动浏览器上的选项卡，并使iframe可点击的问题？

注意:标签中有一个iframe，所以我也需要它是可点击的，到目前为止我还没有尝试修复它。

注意:难点击特别是指旧的移动设备和安全。(很难让它工作在那些)

我能让可点击区域变大吗？

Answer 1

看看这把小提琴，动画现在工作得很顺利：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>

​