gpt4 book ai didi

javascript - 标签上的 preventdefault() 不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 13:50:26 25 4
gpt4 key购买 nike

我是 javascript 的新手,我正在使用 Javascript 编写 Accordion 菜单。我成功了。但最后我的程序有一个错误。

假设大写字母是一级菜单,小写字母是二级菜单。

如果 A 有 child ,点击 A 时显示“a b c d”。

如果还没有显示页面链接到A。

这是我要申请的条件。

但是我在某处被阻止了。实际上,它就像

如果 A 有 child ,点击 A 时显示“a b c d”。如果没有,A 是不可点击的链接。

这是我的源代码。

MyJSFile.js

$(document).ready(function(){
$("#nav > li > a").on("click", function(e){
if($(this).parent().has("ul")) {
e.preventDefault();
}

if(!$(this).hasClass("open")) {
// hide any open menus and remove all other classes
$("#nav li ul").slideUp(350);
$("#nav li a").removeClass("open");

// open our new menu and add the open class
$(this).next("ul").slideDown(350);
$(this).addClass("open");
}

else if($(this).hasClass("open")) {
$(this).removeClass("open");
$(this).next("ul").slideUp(350);
}
});
});

这是我的 CSS 类的 MyCSS.css

#nav {   
padding-left:0px;
display: block;
width: 100%;
margin: 0 auto;
}

#nav li {
list-style-type: none;
}
#nav > li > a:hover, #nav > li > a.open {
color: #FFF;
background-color: #38454B;

background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.35, #212121),
color-stop(1, #866F4A));
background-image: -o-linear-gradient(bottom, #212121 35%, #866F4A 100%);
background-image: -moz-linear-gradient(bottom, #212121 35%, #866F4A 100%);
background-image: -webkit-linear-gradient(bottom, #212121 35%, #866F4A 100%);
background-image: -ms-linear-gradient(bottom, #212121 35%, #866F4A 100%);
background-image: linear-gradient(to bottom, #212121 35%, #866F4A 100%);
}

#nav li ul {
display: none;
background-color: #CCC;
list-style-type: none;
}

HTML 导航在这里

 <nav>
<ul id="nav">
<li><a href="">Accueil</a></li>

<li><a href="Aller à la page 1">Podologie</a>
<ul>
<li><a href="Aller à la page 2.1">Présentation</a></li>
<li><a href="">*Pododiabétologie</a></li>
<li><a href="">*Podopédiatrie</a></li>
<li><a href="">*Podologie sportive</a></li>
<li><a href="Aller à la page 2.3">Les conseils du podologue</a></li>
</ul>
</li>

<li><a href="index.php?pays=FR&page=contact">Contacts</a>
<ul>
<li><a href="http:/www.google.com/search?q=web+design+icons">Lien1</a></li>
<li><a href="http:/www.google.com/search?q=web+design+tutorials">Lien2</a></li>
<li><a href="http:/www.google.com/search?q=web+design+user+interface">Lien3</a></li>
<li><a href="http:/www.google.com/search?q=web+design">Lien4</a></li>
</ul>
</li>
</ul>
</nav>

由第三方编辑:

JSFiddle 在这里:http://jsfiddle.net/3STdc/

最佳答案

if ($(this).parent().has("ul")) 将始终为 true,因为 it returns a jQuery object .

替换为 if ($(this).parent().has("ul").length)

http://jsfiddle.net/mblase75/cUthP/

if ($(this).siblings('ul').length) 稍微短一点,也可以。

关于javascript - <a> 标签上的 preventdefault() 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22256751/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com