JQuery: Toggling Styles Upon Toggling Slide

JavaScript
1

My code sets upon click but does not unset upon clicking again. I’ve tested in the css and .is(‘:visible’) always comes out true, however I’ve been browsing and have tried multiple ways and cannot get it working.

$('.TopNavDropDown').click(function(){
	$('#TopNavList').slideToggle('slow');
	if($('#TopNavList').is(':visible')){
		$('.TopNavDropDownWrap').css('background-color','#f7dd71');
		$('.TopNavDropDownWrap a').css('color','#b11016');
	} else {
		$('.TopNavDropDownWrap').css('background', 'url("http://egentec.com/raffles/images/navi-bg.png")');
		$('.TopNavDropDownWrap a').css('color','#f7dd71');
	}
});

Live View: http://rafflebananza.com/admin/test.html

Please not you must make your window width 834px or lower.

Best Regards,
Tim

2

It seems that the attempt to execute the following code just before the above, is preventing further execution of your code.


var ab = $('body').Width();

The width method is case-sensitive, and should be in lowercase instead.

3

Okay, I’ve sorted out that error, however this css styling toggle will not work;

	$('.TopNavDropDown').click(function(){
		$('#TopNavList').slideToggle('slow');
		if($('#TopNavList').is(':visible')){
			$('.TopNavDropDownWrap').css('background-url', 'none');
			$('.TopNavDropDownWrap').css('background-color','#f7dd71');
			$('.TopNavDropDownWrap a').css('color','#b11016');
		} else {
			$('.TopNavDropDownWrap').css('background-color','none');
			$('.TopNavDropDownWrap').css('background-image', 'url("http://egentec.com/raffles/images/navi-bg.png")');
			$('.TopNavDropDownWrap a').css('color','#f7dd71');
		}
	});
4

Another error that seems to be causing problems is as follows:
Uncaught ReferenceError: ab is not defined


]$(window).resize(function() {
    var iw = $('body').width();
    if (ab > 979) {

I don’t think that you should have removed the offending line earlier on. Correct the problem by putting it back and using the correct case for the width method.

5

Modified, I forgot to name the variable ‘ab’ instead it was ‘iw’ . I also just run it by a validator and checked it to clear things up but still my switch styles will not work.

6

When you do a slow slide toggle, the element is still visible in the microsecond after the command has been issued.

A good solution to this is to either change the styles before issuing the slideToggle command, or to give slideToggle a function to run after the slide is complete.
When do you want to make those css changes to the menu wrapper - before the slide or when the slide has finished?

7

Either, I do not mind.

I am also battling with the sidebar and @media min/max-width;

	$(window).resize(function() {
		var ab = $('body').width();
		if (ab > 964) {
			$('#TopNavList').css('display', 'block');
		} else {
			$('#TopNavList').css('visibility', 'hidden');
		}
	});

If this is matching the media queries then it should be checking if ab > 979, however with that, a bug is occurring on mobile flip where no menu shows I think due to the scrollbar as some browsers media screening include and some do not include the scrollbar width…

8

One thing at a time. To have the if statement part happen after the slideToggle has finished, put it in to its own function as a part of the slideToggle method.


$('.TopNavDropDown').click(function(){
    $('#TopNavList').slideToggle('slow', function () {
        if($('#TopNavList').is(':visible')){
            ...
        } else {
            ...
        }
    });
});
9

Updated the live view. This has partly solved things. The first time round it works but the second recurring only modifies the link styling and not the background styling.