jquery click drop down slide toggle navigation

Question

Я пытался понять это давно. В основном у меня есть меню, и когда пользователь нажимает на стрелку, он будет скользить.

Хотелось бы, чтобы он сделал несколько вещей.

1) Когда пользователь нажимает на раскрывающийся список стрелок, и он скользит вниз, я бы хотел, чтобы они снова могли нажимать на стрелку, а раскрывающееся меню - вверх.

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

Это то, что у меня есть до сих пор. Это обособленно работает от точки 2.

$('nav li i').click(function() { 
    $('nav li i.open').find('.dropdown').not($(this)).slideToggle(300); 
    $('nav li').find('.open').not($(this)).removeClass('open');  
    $(this).toggleClass('open'); 
    $(this).parent('nav li').find('.dropdown').slideToggle(300); 
}); 

Вы можете увидеть jsfiddle здесь, который, мы надеемся, показывает его немного лучше (красная коробка активная область):

http://jsfiddle.net/c8kHN/1/

EDIT: I «Мне удалось заставить второй пункт работать (первый выпадающий список исчезает, если пользователь нажимает на другой), но затем он разбивает первую точку.

$('nav li i').click(function() { 
    $('nav li.open').not($(this)).find('.dropdown').hide(); 
    $('nav').find('.open').not($(this)).removeClass('open');  
    $(this).parent('nav li').toggleClass('open'); 
    $(this).parent('nav li').find('.dropdown').slideToggle(300); 
}); 

http://jsfiddle.net/c8kHN/7/

Answer 1

Если вы собираете ребенка «я», который щелкнул помогает позже решить, какой «ДИВ», чтобы показать/скрыть. Ваш код мог бы выиграть от добавления разных классов в ли, но я написал ответ, не добавляя ничего в ваш оригинальный HTML. надеюсь это поможет.

$('nav li i').click(function() { 

var child = $(this).index('nav ul li i'); 

if ($(this).siblings('.dropdown').is(":visible")){ 
    $('.dropdown').slideUp(300); 
}else{ 
    $('.dropdown').slideUp(300); 
    $('.dropdown:eq('+child+')').slideDown(300);  
} 

});

Answer 2

я попробовал этот код

$('nav li i').click(function() { 
    $('nav li i.open').find('.dropdown').not($(this)).slideToggle(300); 
    $('nav li').find('.open').not($(this)).removeClass('open');  
    $(this).toggleClass('close'); 
    $(this).parent('nav li').find('.dropdown').slideToggle(300); 
}); 

Надежда это вы ищете ..