タッチ（クリック）モバイルデバイスが動作しない

Question

モバイルデバイスのドロップダウンメニューを閉じる際に問題があります。前に追加したクラスを削除する方法はありますか？

デスクトップ用のCssホバーがあり、モバイルデバイス用にクリック可能です。

ありがとうございました。

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

li.drop_down_btn { 
 
\t color:#a3a3a3; 
 
} 
 

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

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

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

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

 
ul.drop_nav { 
 
    list-style-type:none; 
 
\t visibility: hidden; 
 
    opacity:0; 
 
    \t 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; 
 
\t -webkit-border-radius: 10px; 
 
\t border-radius: 10px; 
 
\t khtml-border-radius: 10px; 
 
\t -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 { 
 
\t 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 { 
 
\t visibility: visible; 
 
\t opacity:1; 
 
\t -webkit-transition: all 0.3s ease; 
 
\t -moz-transition: all 0.3s ease; 
 
\t -ms-transition: all 0.3s ease; 
 
\t -o-transition: all 0.3s ease; 
 
\t transition: all 0.3s ease; 
 
\t z-index: 2000; 
 
} 
 

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

 
.dropped_on:hover { 
 
\t cursor:pointer 
 
} 
 

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

 
.drop_down:hover .drop_down_btn:after { 
 
    color: #1b2532; 
 
    font-family: 'FontAwesome'; 
 
\t 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"> 
 

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

Answer 1

あなたの質問は少し不明であるが、イエスのjQueryの少しでそれは例えば、クラスを削除するのは簡単です：

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

からdroppedクラスを削除しますdrop_navクラスの要素。また、モバイルtouchイベントでトリガする

EDIT

はそうのようなあなたのjQuery.onにtouchstartイベントを追加：

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