防止默认后点击的不同功能

Question

这里的测试站点有一个没有下拉文件夹功能的移动菜单（800 像素宽或更小）。我希望移动导航菜单的功能与桌面上的一样。

https://josh-unger-4lts.squarespace.com

title 文件夹的默认设置是打开其文件夹中的第一个 link，所以我阻止了：

<script>  

$(document).ready(function() {
$('#mobileNav .mobile-folder>a').click(function(e) {
    e.preventDefault();

 });
 });
 </script>

我想在点击时显示 "folder titles " 内的隐藏页面 links。

我这里的代码不起作用：

<script>
$(document).ready(function(){
$("#mobileNav .mobile-folder>a").click(function(){
$(this).find('.folder.external-link ul ').toggleClass("expand");
});
 });
  </script>

我的 CSS 隐藏页面 link 并稍后在切换时显示：

.folder.external-link {display:none!important;}


.folder.external-link.expand {display:block!important;}

非常感谢任何帮助。

Answer 1

ul 不是 a 的 child 元素，而是 sibling

所以你的代码应该是这样的（你也可以保留 preventDefault() ）：

<script>
$(document).ready(function(){
    $("#mobileNav .mobile-folder>a").click(function(e){
       e.preventDefault();
       $(this).siblings('ul ').toggleClass("expand");
    });
});
</script>

并且您的 CSS 应该针对 ul class :

.mobile-folder ul {display:none!important;}


.mobile-folder ul.expand {display:block!important;}

防止默认后点击的不同功能

Different function on click after preventing default

css

jquery

toggle

preventdefault