Есть панель пользователя наверху страницы.
<div id="toppanel">
<div id="panel"></div>
<div class="login_tab">
<span id="toggle">
<a id="open" class="open" href="#">Открыть</a>
<a id="close" style="display: none;" class="close" href="#">Закрыть</a>
</span>
</div>
</div>
По умолчанию она скрыта на login_tab висит кнопка "открыть", при нажатии на нее панель открывается, кнопка открыть меняется на "закрыть". Выполняется это при помощи скрипта:
$(document).ready(function() {
// Сворачиваем панель
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
// Разворачиваем панель
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Переключение кнопок при нажатии кнопки мыши
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
Хочу реализовать закрытие панели при нажатии на любой области страницы кроме области панели. Никак не получается написать работоспособный код.
Попробовал написать так:
$("div#body").click(function(){
$("div#panel").slideUp("slow");
$("#toggle a").toggle();
});
Вроде работает, но только при клике на блоке #body
$("body").not("a#open").click(function(){
$("div#panel").slideUp("slow");
$("#toggle a").toggle();
});
Открывается и сразу закрывается
$("a").not("a#open").click(function(){
$("div#panel").slideUp("slow");
$("#toggle a").toggle();
});
Нормально открывается, но при попытке подставить еще условия отрывается и закрывается либо вообще не открывается.
Как правильно составить код? Заранее спасибо за ответы
