3차메뉴 jquery 질문합니다ㅠㅠ
본문
안녕하세요. 3차메뉴를 코딩해야하는데,
다른곳에서 찾아본 것들은 모두, 알아듣질 못하겟네요.
마감은 다가오고 흑흑 고수님들 부탁드립니다.
gnb-3dep 안에 gnb-4dep 이 있는 경우이고요.
gnb-3dep 안에 li 를 클릭하면 그안에있는 gnb-4dep이 opacity가 1 이되어야하는데,
그냥 사라지는데 jq를 어떻게 짜야할지모르겠습니다.ㅠ
*html
<!-- gnb-2dep -->
<ul class="product_dep">
<!-- 3차 메뉴 -->
<li class="sub_menu1 on">
<a href="javascript:();">카바<i class="xi-angle-right"></i></a>
<ul class="gnb-3dep show">
<li><a href="javascript:();">C-플레이트<i class="xi-angle-right"></i></a></li>
<li><a href="javascript:();">벨로우즈&멀티 카바<i class="xi-angle-right"></i></a></li>
<li><a href="javascript:();">롤러 카바<i class="xi-angle-right"></i></a></li>
<li><a href="javascript:();">에이프론 카바<i class="xi-angle-right"></i></a></li>
<li><a href="javascript:();">와이퍼<i class="xi-angle-right"></i></a></li>
<li><a href="javascript:();">테라스프링<i class="xi-angle-right"></i></a></li>
</ul>
</li>
<!-- 3차 메뉴 -->
<li class="sub_menu2">
<a href="javascript:product2();">씰<i class="xi-angle-right"></i></a>
<ul class="gnb-3dep">
<li>
<a href="javascript:product2_1();">O-Rings<i class="xi-angle-right"></i></a>
<!-- 4차 메뉴 -->
<ul class="gnb-4dep">
<li><a href="javascript:product2_1_1();">O-Ring<i class="xi-angle-right"></i></a></li>
<li><a href="javascript:product2_1_2();">O-Ring Accessory</a></li>
</ul>
</li>
<li>
<a href="javascript:product2_2();">Piston Seals<i class="xi-angle-right"></i></a>
<!-- 4차 메뉴 -->
<ul class="gnb-4dep">
<li><a href="javascript:product2_2_1();">Piston Seals</a></li>
</ul>
</li>
<li>
<a href="javascript:product2_3();">Rod Seals<i class="xi-angle-right"></i></a>
<!-- 4차 메뉴 -->
<ul class="gnb-4dep">
<li><a href="javascript:product2_3_1();">Rod Seals</a></li>
</ul>
</li>
<li>
<a href="javascript:product2_4();">Wipers<i class="xi-angle-right"></i></a>
<!-- 4차 메뉴 -->
<ul class="gnb-4dep">
<li><a href="javascript:product2_4_1();">Wipers</a></li>
</ul>
</li>
<li>
<a href="javascript:product2_5();">Rotary Seals<i class="xi-angle-right"></i></a>
<!-- 4차 메뉴 -->
<ul class="gnb-4dep">
<li><a href="javascript:product2_5_1();">Rotary Seals</a></li>
<li><a href="javascript:product2_5_2();">ProTech Seals</a></li>
</ul>
</li>
<li>
<a href="javascript:product2_6();">Wearing<i class="xi-angle-right"></i></a>
<!-- 4차 메뉴 -->
<ul class="gnb-4dep">
<li><a href="javascript:product2_6_1();">Wearing Seals</a></li>
</ul>
</li>
<li>
<a href="javascript:product2_7();">Flexi Seals<i class="xi-angle-right"></i></a>
<!-- 4차 메뉴 -->
<ul class="gnb-4dep">
<li><a href="javascript:product2_7_1();">Flexi Seals</a></li>
</ul>
</li>
</ul>
</li>
<!-- 3차 메뉴 -->
<li class="sub_menu3">
<a href="javascript:product3();">툴<i class="xi-angle-right"></i></a>
<ul class="gnb-3dep">
<li>
<a href="javascript:product3_1();">자동선반 툴<i class="xi-angle-right"></i></a>
<!-- 4차 메뉴 -->
<ul class="gnb-4dep">
<li><a href="javascript:product3_1_1();">HSCARB</a></li>
<li><a href="javascript:product3_1_2();">Total automatic lathe tool with great precision and stability</a></li>
<li><a href="javascript:product3_1_3();">Ultra precise solid carbide micro tools</a></li>
<li><a href="javascript:product3_1_4();">Precision tools for manufacturing and checking threads</a></li>
<li><a href="javascript:product3_1_5();">Manufacturer of quality Knurling products</a></li>
<li><a href="javascript:product3_1_6();">High Quality Grip Lock System Tool</a></li>
</ul>
</li>
<li>
<a href="javascript:product3_2();">바이스<i class="xi-angle-right"></i></a>
<!-- 4차 메뉴 -->
<ul class="gnb-4dep">
<li><a href="javascript:product3_2_1();">바이스</a></li>
</ul>
</li>
<li>
<a href="javascript:product3_3();">앵글헤드<i class="xi-angle-right"></i></a>
<!-- 4차 메뉴 -->
<ul class="gnb-4dep">
<li><a href="javascript:product3_3_1();">Angle head and Driven tools</a></li>
</ul>
</li>
<li>
<a href="javascript:product3_4();">보링 툴<i class="xi-angle-right"></i></a>
<!-- 4차 메뉴 -->
<ul class="gnb-4dep">
<li><a href="javascript:product3_4_1();">CIRCOTEC TX DRILL</a></li>
<li><a href="javascript:product3_4_2();">CIRCOTEC REAMER</a></li>
<li><a href="javascript:product3_4_3();">MEGAMAX & SUPER MEGAMEX</a></li>
<li><a href="javascript:product3_4_4();">INTRAMAX</a></li>
<li><a href="javascript:product3_4_5();">VERSAMAX</a></li>
<li><a href="javascript:product3_4_6();">LBS</a></li>
<li><a href="javascript:product3_4_7();">A25</a></li>
<li><a href="javascript:product3_4_8();">MICROMAX</a></li>
<li><a href="javascript:product3_4_9();">DIGITEC</a></li>
<li><a href="javascript:product3_4_10();">MODULAR BORING SYSTEM</a></li>
</ul>
</li>
<li>
<a href="javascript:product3_5();">엔드밀<i class="xi-angle-right"></i></a>
<!-- 4차 메뉴 -->
<ul class="gnb-4dep">
<li><a href="javascript:product3_5_1();">INSERT ENDMILL & MILLING CUTTER</a></li>
<li><a href="javascript:product3_5_1();">TAP</a></li>
<li><a href="javascript:product3_5_1();">Cemented Carbide DRILL</a></li>
<li><a href="javascript:product3_5_1();">ENDMILL</a></li>
</ul>
</li>
<li>
<a href="javascript:product3_6();">연삭 휠<i class="xi-angle-right"></i></a>
<!-- 4차 메뉴 -->
<ul class="gnb-4dep">
<li><a href="javascript:product3_6_1();">전착 그리인딩 핀</a></li>
<li><a href="javascript:product3_6_2();">연삭휠</a></li>
</ul>
</li>
<li>
<a href="javascript:product3_7();">초경소재<i class="xi-angle-right"></i></a>
<!-- 4차 메뉴 -->
<ul class="gnb-4dep">
<li><a href="javascript:product3_7_1();">초경소재</a></li>
</ul>
</li>
<li>
<a href="javascript:product3_8();">툴프리세터<i class="xi-angle-right"></i></a>
<!-- 4차 메뉴 -->
<ul class="gnb-4dep">
<li><a href="javascript:product3_8_1();">툴 프리세터</a></li>
</ul>
</li>
<li>
<a href="javascript:product3_9();">MQL전용 툴<i class="xi-angle-right"></i></a>
<!-- 4차 메뉴 -->
<ul class="gnb-4dep">
<li><a href="javascript:product3_9_1();">OIL HOLE DRILL</a></li>
<li><a href="javascript:product3_9_2();">EB TOOL</a></li>
</ul>
</li>
<li>
<a href="javascript:product3_10();">윙벤드<i class="xi-angle-right"></i></a>
<!-- 4차 메뉴 -->
<ul class="gnb-4dep">
<li><a href="javascript:product3_10_1();">윙벤드&윙벤드 플러스</a></li>
</ul>
</li>
</ul>
</li>
</ul>
*css
#header .pc_gnb .main_menu .gnb-3dep.show{
opacity: 1;
z-index: 50;
}
#header .pc_gnb .main_menu .gnb-4dep.show{
opacity: 1;
z-index: 50;
}
// 제품메뉴
var $produc_menu = $('.pd_wide');
var $produc_menu_3dep = $('.pd_wide .product_dep > li');
var $produc_menu_3dep_li = $('.pd_wide .product_dep > li .gnb-3dep');
var $produc_menu_4dep = $('.pd_wide .product_dep > .gnb-3dep > li');
$produc_menu_3dep.click(function(){
$(this).children('.gnb-3dep').toggleClass('show');
$(this).children('.gnb-4dep').toggleClass('show');
$(this).toggleClass('on');
$(this).siblings().find('.gnb-3dep').removeClass('show');
$produc_menu_3dep.not($(this)).removeClass('on');
});
답변 1
다음과 같은 방법으로 시도해 볼 수 있을 것 같습니다
gnb-3dep 안에 li를 클릭할 때, 그 안에 있는 gnb-4dep가 보이도록 설정하면 되지 않을까 합니다.
var $produc_menu = $('.pd_wide');
var $produc_menu_3dep = $('.pd_wide .product_dep > li');
$produc_menu_3dep.click(function(){
var $gnb3dep = $(this).children('.gnb-3dep');
var $gnb4dep = $gnb3dep.find('.gnb-4dep');
if ($gnb3dep.hasClass('show')) {
$gnb3dep.removeClass('show');
$gnb4dep.removeClass('show');
$(this).removeClass('on');
} else {
$gnb3dep.addClass('show');
$gnb4dep.addClass('show');
$(this).addClass('on');
}
$produc_menu_3dep.not($(this)).find('.gnb-3dep').removeClass('show');
$produc_menu_3dep.not($(this)).find('.gnb-4dep').removeClass('show');
$produc_menu_3dep.not($(this)).removeClass('on');
});
웹메이킹님 이렇게 하니까! 나오긴하는데 3dep안에있는 4dep이 모두 나오는데.. ㅠㅠ 클릭한 것의 depth만 나와야하는데.. 어카죠? 혹시 오픈채팅가능하실까요?!ㅠ
다음과 같이 하면 되지 않을까 합니다.
var $produc_menu = $('.pd_wide');
var $produc_menu_3dep = $('.pd_wide .product_dep > li');
$produc_menu_3dep.click(function(){
var $current3dep = $(this).children('.gnb-3dep');
var $current4dep = $current3dep.find('.gnb-4dep');
if ($current3dep.hasClass('show')) {
$current3dep.removeClass('show');
$current4dep.removeClass('show');
$(this).removeClass('on');
} else {
// 닫혀 있는 다른 3dep와 그에 해당하는 4dep를 닫습니다.
$produc_menu_3dep.not($(this)).children('.gnb-3dep').removeClass('show');
$produc_menu_3dep.not($(this)).find('.gnb-4dep').removeClass('show');
$produc_menu_3dep.not($(this)).removeClass('on');
$current3dep.addClass('show');
$current4dep.addClass('show');
$(this).addClass('on');
}
});
이렇게 하면 클릭한 3dep 메뉴만 열리고, 다른 3dep 메뉴는 닫히게되고, 다른 3dep 메뉴와 그에 해당하는 4dep 메뉴를 닫을 때, .not($(this))를 사용하여 현재 클릭한 메뉴를 제외한 다른 3dep와 4dep를 선택 할 수 있을 것으로 보입니다.
오픈채팅방 알려주시면 가능합니다.
오오..ㅠㅠ 감사합니다.
https://open.kakao.com/o/s2kSDfMf
답변을 작성하시기 전에 로그인 해주세요.
