I'm currently working on a jQuery dropdown script for my navigation submenus. I have managed to implement the functionality of adding chevrons to the top-level links that have submenus, but I've encountered an issue where the 'return false' action is affecting the submenu links as well. Can anyone help me identify what I might be doing wrong? You can view the code on jsFiddle. Thank you for taking the time to assist.
<div class="nav-outter">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li class="has-submenu"><a href="#">Services</a>
<ul>
<li><a href="#">Web Development</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Multimedia</a></li>
</ul>
</li>
</ul>
</nav>
</div>
$(document).ready(function() {
$('nav > ul > li.has-submenu').each(function() {
$(this).find('a:first-child').each(function() {
$(this).append('<i class="fa fa-chevron-down"></i>');
$(this).on('click', function(e) {
e.preventDefault();
$(this).parent().find('ul').each(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active')
.slideUp(300);
} else {
$(this).addClass('active')
.slideDown(300);
}
});
});
});
});
});
.nav-outter {
position: relative;
z-index: 1;
}
nav > ul {
list-style: none;
}
nav > ul > li {
display: inline-block;
}
nav > ul > li > a {
padding: 3px 15px;
font-size: 1.2em;
color: #2c3e50;
text-decoration: none;
}
nav > ul > li > ul {
display: none;
position: absolute;
z-index: 5;
list-style: none;
border: 1px solid #FC4349;
border-bottom: 0px;
margin-left: 0px;
padding-left: 0px;
margin-top: 3%;
}
nav > ul > li > ul > li {
border-bottom: 1px solid #FC4349;
}
nav > ul > li > ul > li > a {
display: block;
padding: 15px 25px 15px 10px;
text-align: left;
background: #fff;
color: #FC4349;
text-decoration: none;
}