Question

我已经坚持了一段时间了，我仍然无法让它发挥作用。我有一些使用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 for this：

<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代码来自随机谷歌搜索的codepen。如果你碰巧是这方面的作者，请告诉我，我会相信你。谢谢。

Answer 1

为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");
});

Answer 2

也许不是答案，也不是完整答案。它没有使用addClass，但确实有些褪色。也许它会导致答案。

＆＃13;

jQuery(function($) {
	var $dropdownMenus = $('.dropdown-menu');
    
    $dropdownMenus.hide();
    
    $(".dropdown-toggle").on('click', function() {
    	var $toggle = $(this),
        	$toggleContainer = $toggle.parent(),
            $toggleMenu = $toggleContainer.find('.dropdown-menu');
        
        if ($toggleMenu.is(':hidden')) {
        	$dropdownMenus.fadeOut('slow');
          	$toggleMenu.fadeIn('slow');
        } else {
        	$toggleMenu.fadeOut('slow');
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class="nav2">
	<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;">
			<li>
				<h2 class="profileH2">Winkelwagen</h2>
			</li>
		</ul>
	</li>
	<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;">
			<li>
				<h2 class="profileH2">Winkelwagen</h2>
			</li>
		</ul>
	</li>
</nav>

＆＃13;

无法让fadeIn（）在addClass上工作

2 个答案: