Имам меню на Jquery, което показва subnav с помощта на jquery .addclass и .css. Добавям класове и манипулирам css с mouseover и mouseout. Във Firefox, Chrome и Safari всичко работи добре, но в IE8 изглежда "мига" между класовете.
Трудно е за обяснение, но ако погледнете връзката ми във FF и IE, ще разберете какво имам предвид.
Ето моя jQuery:
<script>
$(document).ready(function(){
$("#nav .item-466").mouseover(function(){
$("#selector").addClass("item-466-selector");
$("#nav .menu .current ul li").css("display", "none");
$("#nav .menu .active ul li").css("display", "none");
$("#nav .menu .item-466 ul li").addClass("highlight");
});
$("#nav .item-466").mouseout(function(){
$("#selector").removeClass("item-466-selector");
$("#nav .menu .current ul li").css("display", "inline");
$("#nav .menu .active ul li").css("display", "inline");
$("#nav .menu .item-466 ul li").removeClass("highlight");
});
$("#nav .item-470").mouseover(function(){
$("#selector").addClass("item-470-selector");
$("#nav .menu .current ul li").css("display", "none");
$("#nav .menu .active ul li").css("display", "none");
$("#nav .menu .item-470 ul li").addClass("highlight");
});
$("#nav .item-470").mouseout(function(){
$("#selector").removeClass("item-470-selector");
$("#nav .menu .current ul li").css("display", "inline");
$("#nav .menu .active ul li").css("display", "inline");
$("#nav .menu .item-470 ul li").removeClass("highlight");
});
$("#nav .item-472").mouseover(function(){
$("#selector").addClass("item-472-selector");
$("#nav .menu .current ul li").css("display", "none");
$("#nav .menu .active ul li").css("display", "none");
$("#nav .menu .item-472 ul li").addClass("highlight");
});
$("#nav .item-472").mouseout(function(){
$("#selector").removeClass("item-472-selector");
$("#nav .menu .current ul li").css("display", "inline");
$("#nav .menu .active ul li").css("display", "inline");
$("#nav .menu .item-472 ul li").removeClass("highlight");
});
$("#nav .item-473").mouseover(function(){
$("#selector").addClass("item-473-selector");
$("#nav .menu .current ul li").css("display", "none");
$("#nav .menu .active ul li").css("display", "none");
$("#nav .menu .item-473 ul li").addClass("highlight");
});
$("#nav .item-473").mouseout(function(){
$("#selector").removeClass("item-473-selector");
$("#nav .menu .current ul li").css("display", "inline");
$("#nav .menu .active ul li").css("display", "inline");
$("#nav .menu .item-473 ul li").removeClass("highlight");
});
$("#nav .item-474").mouseover(function(){
$("#selector").addClass("item-474-selector");
$("#nav .menu .current ul li").css("display", "none");
$("#nav .menu .active ul li").css("display", "none");
$("#nav .menu .item-474 ul li").addClass("highlight");
});
$("#nav .item-474").mouseout(function(){
$("#selector").removeClass("item-474-selector");
$("#nav .menu .current ul li").css("display", "inline");
$("#nav .menu .active ul li").css("display", "inline");
$("#nav .menu .item-474 ul li").removeClass("highlight");
});
});
</script>
Моят CSS:
<style>
#nav .menu li {
list-style: none;
display: inline;
float: left;
border-radius: 10px;
padding: 10px 16px;
margin-left: 3px;
}
.highlight {
display: inline!important;
}
</style>
HTML е структуриран по следния начин:
<ul id="nav">
<li class="item-466 active">Page 1</li>
<ul>
<li>SubPage1</li>
<li>SubPage2</li>
<li>SubPage3</li>
</ul>
<li class="item-470">Page 2</li>
<li class="item-472">Page 3</li>
<li class="item-473">Page 4</li>
</ul>
Всяка помощ ще бъде оценена! Благодаря предварително. :)
Не ви трябва частта
checked=
. просто отпечатайте проверено в етикета, ако трябва да се провери.РЕДАКТИРАНЕ
Сега, след като установихме, че само отпечатването на „проверено“ е валиден html, можете да опитате за по-лесно:
изобразявам:
шаблон:
Няма нужда от разхвърляни условни изрази във вашия шаблон, като използвате този метод.
- person Nicole McCoy   schedule 02.12.2011