手機上的多級菜單，touchstart鏈接中的圖標

Question

有多級菜單，其中每個<li>包含<a>。在桌面上，子菜單用:hover打開，一切都很好。 在手機上，我想替換:hover單擊字體真棒caret-down圖標點擊打開子菜單。但是，在下面的HTML中，<a> 捕捉到觸摸。

如何捕獲單擊鏈接內部的圖標並讓鏈接的其餘部分仍然可點擊？

 $(document).ready(function() { 
      $('.hover').bind('touchstart', function (e) { 
       e.preventDefault(); 
       $(this).parent().toggleClass('hover_effect'); 
      }); 
     }); 

這是菜單結構：

<li class="hover"><a href="/link1">WordPress Development<i class="fa fa-caret-down hover" aria-hidden="true"></i></a> 
    <ul> 
     <li><a href="/link2">Themes</a></li> 
     <li><a href="/link3">Plugins</a></li> 
     <li class="hover"><a href="/link4">Custom Post Types<i class="fa fa-caret-down hover" aria-hidden="true"></i></a> 
      <ul> 
       <li class="hover"><a href="/link5">Portfolios</a></li> 
       <li class="hover"><a href="/link6">Testimonials</a></li> 
      </ul> 
     </li> 
     <li><a href="/link7">Options</a></li> 
    </ul> 
</li> 

Answer 1

所以，你需要的是事件或功能將無法正常工作的鏈接點擊，但您fontawesome圖標。而由於尤爾導航你只有一個標籤，你並不需要爲它提供id或class，只需更換「.hover」到「.hover我」：

`

$(document).ready(function() { 
    $('.hover i').bind('touchstart', function (e) { 
    e.preventDefault(); 
    $(this).parent().toggleClass('hover_effect'); 
    }); 
}); 

`