javascript - 触摸(点击)移动设备不起作用

Question

我只在移动设备上关闭下拉菜单时遇到问题。有没有办法删除我之前添加的类？

桌面有一个 Css 悬停，移动设备可以点击。

感谢您的任何回答。

	$(document).ready(function(){
		$('.drop_helper').on("click",function() {
			$('.drop_nav').toggleClass('dropped');
			$('.drop_helper').toggleClass('dropped_on').toggleClass('drop_down_btn');
		});
	});

li.drop_down_btn {
	color:#a3a3a3;
}

li.drop_down_btn:after {
	color:#a3a3a3;
	font-family: 'FontAwesome';
	content: "\f107";
	font-size:16px;
	padding-left: 9px;
}

li.drop_down_btn:hover {
	cursor: pointer;
	color:#1b2532;
}

li.drop_down_btn:hover:after {
	font-family: 'FontAwesome';
	content: "\f106";
	color:#1b2532;
}

ul.drop_down {
    position: relative;
    display: inline-block;
    list-style-type:none
}

ul.drop_nav {
    list-style-type:none;
	visibility: hidden;
    opacity:0;
  	position: absolute;
    text-align: left;
    line-height: 26px;
    /* background:url(bg_drop_down.png);*/
    background-color:#FCFCFC;
  
    padding:20px;
    margin-left:-20px;
    -moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	khtml-border-radius: 10px;
	-webkit-transition: all 0.3s ease;
       -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
         -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
}

.drop_nav li a {
    display: block;
}

ul.drop_down:hover ul.drop_nav {
	visibility: visible;
    opacity:1;
    -webkit-transition: all 0.3s ease;
       -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
         -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
    z-index: 2000
}

ul.dropped {
	visibility: visible;
	opacity:1;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	z-index: 2000;
}

.dropped_on:after {
	color: #1b2532;
	font-family: 'FontAwesome';
	content: "\f106";
	font-size: 16px;
	padding-left: 9px;
}

.dropped_on:hover {
	cursor:pointer
}

.drop_down:hover .drop_down_btn {
    color: #1b2532;
}

.drop_down:hover .drop_down_btn:after {
    color: #1b2532;
    font-family: 'FontAwesome';
	content: "\f106";
}

.drop_down .menu_btn a{
    color: #a3a3a3;
}

.drop_down .menu_btn a:hover {
    color: #1b2532;
    text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="drop_down">
                <li class="drop_helper drop_down_btn">Category</li>
                <ul class="drop_nav">

                    
					<li><a title="Food" href="/posts/food/">Food</a></li>
					
					<li><a title="Fashion" href="/posts/fashion/">Fashion</a></li>
					
					<li><a title="Entertainment" href="/posts/entertainment/">Entertainment</a></li>
					
                </ul>
            </ul>

Answer 1

你的问题有点不清楚，但是是的，使用一点点 jQuery 很容易删除一个类，例如:

$('.drop_nav').removeClass('dropped');

将从具有 drop_nav 类的元素中删除 dropped 类。

编辑

要在移动设备上触发 touch 事件，请将 touchstart 事件添加到您的 jQuery.on 中，如下所示:

$('.drop_helper').on('click touchstart'), function() {
...