При клике по ссылкам в теге v-town открывается меню menu-town, если кликать опять по тем же ссылкам в теге v-town меню закрывается. Вопрос в следующем, как сделать чтобы кликая в не меню в любой области страницы, оно закрывалось? И возможно ли менять background для тега v-town одновременно когда открывается меню, когда закрывается убирать его?
есть js:
Код:
<script type="text/javascript">
$(document).ready(function () {
$("ul.menu-town li:even").addClass("alt");
$('p.v-town a').click(function () {
$('ul.menu-town').slideToggle('medium');
});
});
</script>
есть html:
Код:
<!-- Town #Begin /-->
<div class="town">
<p class="v-town">Ваш город <a href="javascript:void(null);">Москва<i></i></a></p>
<ul class="menu-town">
<li><a href=""><span><b>Москва</b></span></a></li>
<li><a href=""><span><b>Санкт-Петербург</b></span></a></li>
<li><a href=""><span>Волгоград</span></a></li>
<li><a href=""><span>Екатеринбург</span></a></li>
<li><a href=""><span>Казань</span></a></li>
<li><a href=""><span>Нижний Новгород</span></a></li>
<li><a href=""><span>Новосибирск</span></a></li>
<li><a href=""><span>Омск</span></a></li>
<li><a href=""><span>Ростов-на-Дону</span></a></li>
<li><a href=""><span>Самара</span></a></li>
<li><a href=""><span>Уфа</span></a></li>
<li><a href=""><span>Челябинск</span></a></li>
<li class="end"></li>
</ul>
</div>
<!-- Town #End /-->
и css:
Код:
.town {position: absolute; font: normal 11px Arial; color: #ffffff; display: block; top: 13px;}
.town a {color: #ffb800; text-decoration: none;}
.town .v-town {position: relative; padding: 0 0 13px 0;}
.town i {position: absolute; width: 5px; height: 3px; right: -8px; top: 6px; background: url('./images/arrow.gif') 0 0; overflow: hidden;}
.town .menu-town {position: absolute; width: 204px; display: none; margin: 0 0 0 -12px; padding-top: 8px; background: url('./images/bg_town.jpg') repeat-y; z-index: 5;}
.town .menu-town li a {height: 20px; font: normal 11px Arial; color: #352530; margin: 0 2px; padding-top: 4px; display: block;}
.town .menu-town li a:hover {background: #f2f2f2;}
.town .menu-town li a span {padding-left: 12px;}
.town .menu-town li.end {height: 9px; background: url('./images/bg_town_bottom.jpg') no-repeat center bottom;}
