toggling display states oddity

Question

У меня есть этот jQuery-переключатель, который меняет отображение одного div с другим. Теперь, если я нажму на link1 (отобразит div.shows), а затем откройте его, а затем снова, я не могу щелкнуть его (или мою домашнюю кнопку) еще раз, если не нажму ссылку link2 (div.depts). Я что-то испортил в своем CSS или я неправильно установил свои истинные/ложные состояния в моем jQuery?

Вот JQuery:

var displayShow = false; 
var displayDept = false; 
var containerHeight = 130; 
$(".showLinks").click(function() { 
    if (displayDept) { 
     toggleDisplay(".depts",0,0); 
     displayDept = false; 
     console.log("displayDept: " + displayDept); 
    } 
    if (displayShow) { 
     toggleDisplay(".shows",0,0); 
     displayShow = false; 
     console.log("displayShow: " + displayShow); 
    } else { 
     toggleDisplay(".shows",1,containerHeight); 
     displayShow = true; 
     console.log("displayShow: " + displayShow); 
    } 
}); 
$(".deptLinks").click(function() { 
    if (displayShow) { 
     toggleDisplay(".shows",0,0); 
     displayShow = false; 
     console.log("displayShow: " + displayShow); 
    } 
    if (displayDept) { 
     toggleDisplay(".depts",0,0); 
     displayDept = false; 
     console.log("displayDept: " + displayDept); 
    } else { 
     toggleDisplay(".depts",1,containerHeight); 
     displayDept = true; 
     console.log("displayDept: " + displayDept); 
    } 
}); 
function toggleDisplay(divClass,divOpacity,divHeight) { 
    $(divClass).animate({ 
     opacity: divOpacity, 
     height: divHeight 
    }); 
} 

А остальное можно найти здесь: http://jsfiddle.net/jawa9000/xn8WB/1/

Answer 1

Похоже, это может быть виновником:

<div class="homeLink"> 
<a href="#">Home</a> 
</div> 
    <div class="showLinks">Links1</div> 
    <div class="deptLinks">Links2</div> 

Вы таргетинг:

$(".showLinks") & & $(".deptLinks")

В вашем Javascript не случится увидеть любой div для домой ссылки, или любого ссылки к ним ... homeLink изолирована.

Answer 2

Я думаю, что моя проблема связана с элементами. Когда div скрывается, чтобы быть скрытым, элемент все еще отображается как таблица-таблица вместо отображения: none.

Чтобы исправить это, я просто добавил ссылку к моему если/другому заявлению:

$("div.link1/link2 ul").css("display","none/table-cell"); 

спасибо за игру!