I have an animated navigation via some jQuery functions. It all works fine but one thing is making me crazy. The last item (item nb. 5) should redirect you to new page but it does not happen. I have the condition on first few first lines of code below
$(document).ready(function(){
$('li > a').on('click', function(e) {
if ($(this).parent().has('p')) {
e.preventDefault();
}
if (!$(this).hasClass('active')) {
$('li a').next('p').stop().slideUp();
$(this).next('p').stop().slideDown();
$('li a').removeClass('active');
$(this).addClass('active');
}
else if ($(this).hasClass('active')) {
$(this).next('p').stop().slideUp();
$(this).removeClass('active');
}
})
})
has(selector)
Description: Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.
Returns: jQuery
.has()
returns a jQuery object.
Use .find('p').length
or .has('p').length
instead of .has('p')
:
$(document).ready(function(){
$('li > a').on('click', function(e) {
if ($(this).parent().find('p').length) {
e.preventDefault();
}
if (!$(this).hasClass('active')) {
$('li a').next('p').stop().slideUp();
$(this).next('p').stop().slideDown();
$('li a').removeClass('active');
$(this).addClass('active');
}
else if ($(this).hasClass('active')) {
$(this).next('p').stop().slideUp();
$(this).removeClass('active');
}
});
});