建站教程 2022-04-05

JQUERY实现网站导航点击链接不跳转只展开/收缩二级菜单

在制作手机网站时，网站导航有时会有二级菜单，当某个栏目有二级菜单时，点击父超链接不跳转，只展开/收缩二级菜单。默认情况下，只要我们点击了超链接就会跳转，如果想让点击链接不跳转只展开/收缩二级菜单，就需要使用JQUERY来控制。

实现效果如下：

实现方法比较简单，只要将下面的JQUERY代码放在导航代码下方即可。

<div class="codecolorer-container javascript geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="javascript codecolorer" style="white-space:nowrap"><span style="color: #339933;">&lt;</span>script<span style="color: #339933;">&gt;</span><br>
$<span style="color: #009900;">(</span><span style="color: #3366CC;">".navlist&gt;li.menu-item-has-children&gt;a"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">click</span><span style="color: #009900;">(</span><br><span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span><br>
$<span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">)</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"href"</span><span style="color: #339933;">,</span><span style="color: #3366CC;">"#"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br>
$<span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">)</span>.<span style="color: #660066;">next</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"ul"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">slideToggle</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></div></div>

$(".navlist>li.menu-item-has-children>a").click( function(){

$(this).next("ul").slideToggle(); }); </script></div></div>

如果要PC站导航是移动显示二级菜单，手机站是点击展开，可以用下面的代码：

通过PHP判断是不是手机站，从而加载不同的JQUERY代码，实现不同的功能需求。

由于网站搬家，部分链接失效，如无法下载，请联系站长！谢谢支持！
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » JQUERY实现网站导航点击链接不跳转只展开/收缩二级菜单

分享到：