我已经坚持了一段时间,但仍然无法正常工作。我有一些使用addClass
和removeClass
来显示和隐藏子菜单元素的JavaScript。 addclass
和removeClass
都可以工作,我一直在尝试使fadeIn
和fadeOut
也可以工作。我已经尝试过animate
函数,但到目前为止没有任何帮助。有人还告诉我使用toggleClass
代替,稍后我会研究
jQuery(document).ready(function (e) {
function t(t) {
e(t).bind("click", function (t) {
t.preventDefault();
e(this).parent();
});
}
e(".dropdown-toggle").click(function () {
var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
e(".button-dropdown .dropdown-menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active"); //i believe that this is where i need to toggle the fadeIn and FadeOut
}
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")){
e(".button-dropdown .dropdown-menu").hide();
}
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")){
e(".button-dropdown .dropdown-toggle").removeClass("active");
}
})
});
的HTML:
<nav class="nav2">
<a href="profile.php" class="imglink"><img src="img/icon-profile.png" WIDTH=40 HEIGHT=40></a>
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle"><img src="img/cart.png" class="cart"WIDTH=40 HEIGHT=40></a>
<ul class="dropdown-menu" style="list-style:none;">
<p>
<h2 class="profileH2">Winkelwagen</h2>
</p>
</ul>
</li>
</nav>
基本上,这显示和隐藏
button-dropdown
的子菜单。谁能帮我这个忙?谢谢
我发现的JavaScript代码是来自Google随机搜索的Codepen。如果您恰巧是此书的作者,请告诉我,我会为您效劳。谢谢。
最佳答案
将fadeOut
替换为hide
,将fadeIn
替换为toggle
(这总是与show
等效,因为您总是先hide
对其进行交换)。
https://jsfiddle.net/eyemsa34/
e(".dropdown-toggle").click(function () {
var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
e(".button-dropdown .dropdown-menu").fadeOut();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown-menu").fadeIn().parents(".button-dropdown").children(".dropdown-toggle").addClass("active"); //i believe that this is where i need to toggle the fadeIn and FadeOut
}
});
您还可以使用
fadeToggle
和toggleClass
让jQuery为您处理切换逻辑。https://jsfiddle.net/eyemsa34/1/
e(".dropdown-toggle").click(function () {
e(".button-dropdown .dropdown-menu").fadeToggle();
e(".button-dropdown .dropdown-toggle").toggleClass("active");
});