Приветствую!
Есть меню, в котором есть видимая левая часть и правая часть, которая раскрывается в соответствии с выбранной вкладкой в левой части меню.
Помогите переделать JS, чтобы задача была выполнена.
<div class="all_categorys">
<!-- Левая видимая часть меню начало-->
<div class="mc">
<ul class="menu">
<li cat_id="1">
<div class="class">
<h4><a href="index.html?cate_id=1">Title 1</a></h4>
</div>
</li>
<li cat_id="2">
<div class="class">
<h4><a href="index.html?cate_id=2">Title 2</a></h4>
</div>
</li>
<li cat_id="3">
<div class="class">
<h4><a href="index.html?cate_id=3">Title 3</a></h4>
</div>
</li>
</ul>
<!-- скролл начало-->
<div class="ps-scrollbar-y-rail" style="top: 0px; right: 3px; height: 573px; display: inherit;"><div class="ps-scrollbar-y" style="top: 0px; height: 518px;"></div></div>
<!-- скролл конец-->
</div>
<!-- Левая видимая часть меню конец-->
<!-- Правая раскрывающаяся часть меню начало-->
<div class="sub-class" cat_menu_id="1" style="display: none; top: -2px;">
<div class="sub-class-content">
<div>Text</div>
</div>
</div>
<div class="sub-class" cat_menu_id="2" style="display: none; top: -38px;">
<div class="sub-class-content">
<div>Text</div>
</div>
</div>
<div class="sub-class" cat_menu_id="3" style="display: none; top: -74px;">
<div class="sub-class-content">
<div>Text</div>
</div>
</div>
<!-- Правая раскрывающаяся часть меню конец-->
</div>
$(function() {
$(".all_categorys ul.menu").find("li").each(
function() {
$(this).hover(
function() {
var cat_id = $(this).attr("cat_id");
var menu = $(this).find("div[cat_menu_id='"+cat_id+"']");
menu.show();
$(this).addClass("hover");
var menu_height = menu.height();
if (menu_height < 60) menu.height(80);
menu_height = menu.height();
var li_top = $(this).position().top;
$(menu).css("top",-li_top + 40);
},
function() {
$(this).removeClass("hover");
var cat_id = $(this).attr("cat_id");
$(this).find("div[cat_menu_id='"+cat_id+"']").hide();
}
);
}
);
});
Заранее спасибо!