想要在检测到移动设备时使用javascript将菜单URL转换为＃

Question

I have a drop down superfish menu in my responsive site and while I have the menu changing to a mobile friendly sidr slide menu for most mobile devices the client would still like to have the orginal dropdown menu showing when a tablet is in landscape orientation.

This obviously creates the usual hover issue with touch devices especially since we have the top li (of a drop down) also providing a href.

My thoughts were that for those particular top level li's we'd add a class on which we could then run some javascript to replace the usual url link with a # when a mobile device is detected. That would make the top li a touch item instead of a hover link item.

Anyway below is what I have constructed to date and I had though this would work but so far I can't seem to get it to replace the original url with the #

<script>
    $(document).ready(function($){
    var deviceAgent = navigator.userAgent.toLowerCase();
    var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/);
    if (agentID) {
        $('#sf-menu.sf-menu li.idevice a').attr('href', '#');
    }
});
</script>

I'm guessing I'm missing something really obvious but I've got to that point where I've exhausted my knowledge level - I'm not really a coder, more an enthusiastic tinkerer :).

Below is a snippet of the menu code for reference.

<div id="mateen">   
  <ul id="sf-menu" class="sf-menu">  
    <li  class="menu-item"><a href="/Home.htm">Home</a></li>
    <li  class="idevice"><a href="/advantages.htm">Advantages</a>
      <ul>
        <li  ><a href="/advantages.htm">Mateenbar Advantages</a></li>
        <li  ><a href="/superior-performance.htm">Superior Performance</a></li>
        <li  ><a href="/research-and-testing.htm">Research and Testing</a></li>
        <li  ><a href="/FAQ.htm">Frequently Asked Questions</a></li>
        <li  ><a href="/middle-east.htm">Middle East</a></li>
      </ul>
    </li>
    <li  class="idevice"><a href="/mateenbar.htm">Products &amp; Specifications</a>
      <ul>
        <li  ><a href="/mateenbar.htm">MateenBar</a></li>
        <li  ><a href="/mateendowel.htm">MateenDowel</a></li>
        <li  ><a href="/mateenbolt.htm">MateenBolt</a></li>
      </ul></li>
    <li  class="idevice"><a href="/corrosion-and-marine.htm">Applications &amp; Projects</a>
      <ul>
        <li  ><a href="/corrosion-and-marine.htm">Corrosion &amp; Marine</a></li>
        <li  ><a href="/roads-and-transportation.htm">Roads &amp; Transportation</a></li>
        <li  ><a href="/tunnelling-and-cutting.htm">Tunnelling &amp; Cutting</a></li>
        <li  ><a href="/electro-magnetic.htm">Electro-magnetic</a></li>
        <li  ><a href="/projects.htm">Projects</a></li>
      </ul>
    </li>
    <li  ><a href="/downloads.htm">Downloads</a></li>
    <li  class="idevice"><a href="/contacts.htm">Contacts</a>
      <ul>
        <li  ><a href="/contacts.htm">Locations</a></li>
        <li  ><a href="/about-pultron.htm">About Pultron</a></li>
      </ul>
    </li>
  </ul>
</div>

Any advice or help accepted at this point - hope I've provided enough relevant information.

Thanks

Answer 1

The problem is with the selector. Change the following statement

$('#sf-menu.sf-menu li.idevice a').attr('href', '#');

to

$('#sf-menu > li > a').attr("href","#")

For your reference: https://css-tricks.com/child-and-sibling-selectors/