我遇到问题只关闭移动设备中的下拉菜单。有没有办法删除我之前添加的类?
桌面上有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>
答案 0 :(得分:1)
你的问题有点不清楚,但有一点jQuery是很容易删除一个类,例如:
$('.drop_nav').removeClass('dropped');
将从dropped
类的元素中删除drop_nav
类。
修改强>
要同时触发移动touch
事件,请将touchstart
事件添加到jQuery.on
,如下所示:
$('.drop_helper').on('click touchstart'), function() {
...