CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Waro1234
Waro1234

Reputation: 73

Can't get fadeIn() to work on addClass

I've been stuck with this for a while now and I still can't get it to work. I have this bit of JavaScript that uses addClass and removeClass to show and hides a submenu element. The addclass and removeClass both work and I've been trying to get the fadeIn and fadeOut to work as well. I've tried the animate function but none have helped so far. Someone also told me to use toggleClass instead, I will look into that a bit later

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

The 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>

Basically this shows and hides the submenu of button-dropdown. Who can help me with this?

Thanks

The JavaScript code I found was on codepen from a random google search. If you happen to be the writer of this, let me know and I'll credit you for it. Thank you.

Upvotes: 1

Views: 88

Answers (2)

Taplar
Taplar

Reputation: 24965

Maybe not the answer, or complete answer. It's not using addClass, but it does do some fading. Maybe it will lead to the answer.

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');
        }
    });
});
<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>

Upvotes: 1

arcyqwerty
arcyqwerty

Reputation: 10675

Swap fadeOut for hide and fadeIn for toggle (which is always the equivalent of show since you always hide it first).

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

You can also use fadeToggle and toggleClass to have jQuery handle the toggling logic for you.

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

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

Upvotes: 1

Related Questions