Touch (click) mobile device doesn't work

Question

I have a problem close my drop down menu in mobile devices only. Is there a way how to remove classes i added before?

There is a Css hover for desktop and clickable for mobile devices.

Thank you for any answers.

	$(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

Your question is a bit unclear but yes with a little bit of jQuery it's easy to remove a class, for example:

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

Will remove the dropped class from elements with the drop_nav class.

EDIT

To also trigger on mobile touch events add the touchstart event to your jQuery.on like so:

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