Как сделать мой навигационный элемент неактивным снова?

Question

У меня проблема с моей навигационной панелью. Я пытаюсь сделать функциональность, когда, когда я нажимаю на один элемент навигации, он расширяет свои дочерние элементы. Это прекрасно работает. Когда я нажимаю на другой элемент навигации, он сворачивает предыдущий элемент и расширяет текущий. Это прекрасно работает. Недавно я добавил новую функциональность, где хочу, чтобы текущий элемент навигации сохранял свой зависающий вид, делая его активным, если вы, ребята, понимаете, что я имею в виду.

Все, что я мог придумать, это этот код, который действительно делает некоторые из того, что я хочу, но это не делает элемент навигации неактивным снова после нажатия на текущий элемент навигации, только когда я нажимаю новый. Если это неясно, я предоставил ссылку.

$(function(){ 
    $(".main-nav").on("click",function(){ 
     $(this).siblings().find(".inner-nav").hide(); //collapse siblings 
     $(this).siblings().find('a').attr('id', ''); //make siblings inactive 

     $(this).find(".inner-nav").toggle(); //expand current item 
     $(this).find("a").attr('id','nav-active'); //make current item active 
     $(this).find("ul").find("a").attr('id',''); //remove the nav-active ID from the current items children, as it also will appear as active, which is not the desired functionality 
    }); 
}); 

Answer 1

попробовать это:

$(function(){ 
    $(".main-nav").on("click",function(){ 
     $(this).siblings().find(".inner-nav").hide(); 
     $(this).siblings().find('a').attr('id', ''); 

     $(this).find(".inner-nav").toggle(); 
     //$(this).find("a").attr('id','nav-active'); 
    if ($(this).find("a").attr('id') == 'nav-active') { 
     $(this).find("a").attr('id',''); 
    } else { 
     $(this).find("a").attr('id','nav-active'); 
    } 
     $(this).find("ul").find("a").attr('id',''); 
    }); 
}); 

Я добавил только простую проверку:

if ($(this).find("a").attr('id') == 'nav-active') { 
    $(this).find("a").attr('id',''); 
} else { 
    $(this).find("a").attr('id','nav-active'); 
} 

fiddle

Надежда, я понимаю, что вы правы.

Answer 2

Я действительно не могу получил свою точку зрения очень хорошо, но дайте угадаю .. При нажатии на любой из детей его схлопывания весь Div .. в этом случае вам нужно e.stopPropagation();

$(function(){ 
    $(".main-nav").on("click",function(){ 
     $(".inner-nav").not($(this).find(".inner-nav")).hide(); 
     $(this).find(".inner-nav").toggle(); 
    }); 
    $(".main-nav > ul > li > a").on('click' , function(e){ 
     e.stopPropagation(); 
     $(".main-nav > ul > li > a").not($(this)).attr('id' , ''); 
     $(this).attr('id' , 'nav-active'); 
    }); 
}); 

Я надеюсь, что это один будет то, что вы ищете

Working Demo