Показать сообщение отдельно
  #1 (permalink)  
Старый 14.04.2021, 15:28
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 178

Раскрыть правую часть меню в соответствии с ID
Приветствую!

Есть меню, в котором есть видимая левая часть и правая часть, которая раскрывается в соответствии с выбранной вкладкой в левой части меню.

Помогите переделать 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();
				}
			);
		}
	);  

});


Заранее спасибо!

Последний раз редактировалось Vaska, 15.04.2021 в 00:07.
Ответить с цитированием