我已经坚持了一段时间,但仍然无法正常工作。我有一些使用addClassremoveClass来显示和隐藏子菜单元素的JavaScript。 addclassremoveClass都可以工作,我一直在尝试使fadeInfadeOut也可以工作。我已经尝试过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
    }
});


您还可以使用fadeToggletoggleClass让jQuery为您处理切换逻辑。

https://jsfiddle.net/eyemsa34/1/

e(".dropdown-toggle").click(function () {
    e(".button-dropdown .dropdown-menu").fadeToggle();
    e(".button-dropdown .dropdown-toggle").toggleClass("active");
});

10-05 20:54
查看更多