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

Question

我的响应站点中有一个下拉超级菜单，虽然大多数移动设备的菜单都改为移动友好的sidr滑动菜单，但客户端仍然希望平板电脑处于横向时显示原始下拉菜单。

这显然造成了触摸设备常见的悬停问题，尤其是因为我们有(下拉列表的)顶部li也提供href。

我的想法是，对于那些特定的顶级li，我们会添加一个类，然后在检测到移动设备时，我们可以在该类上运行一些javascript，用#代替通常的url链接。这将使顶部li成为一个触摸项目，而不是一个悬停链接项目。

无论如何，以下是我迄今为止构建的内容，我认为这会起作用，但到目前为止，我似乎无法用#取代原始url

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

我猜我错过了一些非常明显的东西，但我已经到了耗尽知识水平的地步——我不是一个真正的程序员，更像是一个热情的修补者：)。

下面是菜单代码的一个片段以供参考。

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

目前接受的任何建议或帮助——希望我已经提供了足够的相关信息。

感谢

Answer 1

问题出在选择器上。更改以下语句

$('#sf-menu.sf-menu li.idevicea').attr('ref'，'#')

至

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

供您参考：https://css-tricks.com/child-and-sibling-selectors/