html - 如何使这个按钮在触摸设备中可点击？

Question

我的菜单按钮有问题。我在网上找到了这段代码，按钮带有标签和输入。它在手机等触摸设备中不可点击。我怎样才能让这个按钮可点击？

请帮助某人

这是链接:http://jsfiddle.net/Ltspckd0/

HTML 代码

<div id="adminmenu">
    <label for="show-menu" class="show-menu">Menuja</label>
    <input type="checkbox" id="show-menu" role="button">
    <ul id="menu">
        <li><a id="ahome" href="#">Kreu</a></li>
        <li><a id="apatients" href="#">Pacient</a></li>
        <li><a id="advisit"href="#">Vizita</a></li>
        <li><a id="areports"href="#">Raporte</a></li>
        <li><a id="aprofile"href="#"><?php echo $username=user_name(); ?></a></li>
    </ul>
</div>

CSS 代码

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#adminmenu li {
    display: inline-block;
    float: left;
    width: 20%;
    border-right: 1px solid #F5F5F5;
}

li a {
    display: block;
    min-width: 140px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    background: #2D6CA2;
    text-decoration: none;
}

li:hover a {
    background: #428BCA;
    color: #fff;
    text-decoration: none;
}

li:hover ul a {
    background: #f3f3f3;
    color: #2D6CA2;
    height: 40px;
    line-height: 40px;
}

li:hover ul a:hover {
    background: #428BCA;
    color: #fff;
}

li ul {
    display: none;
}

li ul li {
    display: block;
    float: none;
}

li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
}

ul li a:hover + .hidden, .hidden:hover {
    display: block;
}

.show-menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #fff;
    background: #428BCA;
    text-align: center;
    padding: 10px 0;
    display: none;
}

input[type=checkbox] {
    display: none;
}

input[type=checkbox]:checked ~ #menu {
    display: block;
}

@media screen and (max-width : 760px) {

    ul {
        position: static;
        display: none;
    }

    li {
        margin-bottom: 1px;
    }

    #adminmenu ul li, li a {
        width: 100%;
    }

    .show-menu {
        display: block;
    }
}

Answer 1

您可以像这样将 jQuery click/tap 事件添加到菜单

$('.show-menu').on('click tap', function(e){
    $('#menu').toggle();
    e.preventDefault();
});