Need some help with && operator

JavaScript
1

I have no business mucking about with this js file, but thought I would try anyway.

I have added .secondary-nav to my page and discovered that it was not showing up because its appearance was controlled by a js file. That snippet is shown next in the folowing pen - http://codepen.io/anon/pen/EaEXyK

The result is that my .secondary-nav is now showing up and the .primary-nav is not. I would think that && would include both nav’s but that turned out not to be the case. What I would like to see is that both .primary-nav and .secondary-nav menus appear.

Any help will be greatly appreciated.

Thanks!

2

This may be a better way to see the js.

	if( $(('.primary-nav') && ('.secondary-nav')) .hasClass('is-visible') ) {
		$(('.primary-nav') && ('.secondary-nav')) .removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
			$('body').removeClass('overflow-hidden');
		});
	} else {
		$(('.primary-nav') && ('.secondary-nav')) .addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
			$('body').addClass('overflow-hidden');
		});	
	}
});

I added the .secondary-nav part but that is preventing the .primary-nav from showing up.

Thanks.

3

I think you need something like this.

if ( $('.primary-nav').hasClass('is-visible') && $('.secondary-nav').hasClass('is-visible') ) {
            $('.primary-nav,.secondary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
                $('body').removeClass('overflow-hidden');
            });
        } else {
            $('.primary-nav,.secondary-nav').addClass('is-visible')
        }

A working example:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.primary-nav, .secondary-nav {
    height:30px;
    transition:all 5s ease;
}
.is-visible {
    background:red;
    margin:0 0 20px;
    height:100px;
}
</style>
</head>

<body class="overflow-hidden">
<div class="primary-nav is-visible">Primary</div>
<div class="secondary-nav is-visible">Secondary</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
if ( $('.primary-nav').hasClass('is-visible') && $('.secondary-nav').hasClass('is-visible') ) {
            $('.primary-nav,.secondary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
                $('body').removeClass('overflow-hidden');
            });
        } else {
            $('.primary-nav,.secondary-nav').addClass('is-visible')
        }
</script>
</body>
</html>
4

@PaulOB

Thank you so much. That was exactly what I needed.

I sincerely appreciate your help.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.