목록으로

3차메뉴 jquery 질문합니다ㅠㅠ 채택완료

itb 2년 전 조회 2,765

답변 1

안녕하세요. 3차메뉴를 코딩해야하는데,

다른곳에서 찾아본 것들은 모두, 알아듣질 못하겟네요.

마감은 다가오고 흑흑 고수님들 부탁드립니다.

gnb-3dep 안에 gnb-4dep 이 있는 경우이고요.

gnb-3dep 안에 li 를 클릭하면 그안에있는 gnb-4dep이 opacity가 1 이되어야하는데,

그냥 사라지는데 jq를 어떻게 짜야할지모르겠습니다.ㅠ

*html

<ul class="product_dep">  <li class="sub_menu1 on"> <a href="javascript:();">카바</a> <ul class="gnb-3dep show"> <li><a href="javascript:();">C-플레이트</a></li> <li><a href="javascript:();">벨로우즈&멀티 카바</a></li> <li><a href="javascript:();">롤러 카바</a></li> <li><a href="javascript:();">에이프론 카바</a></li> <li><a href="javascript:();">와이퍼</a></li> <li><a href="javascript:();">테라스프링</a></li> </ul> </li>  <li class="sub_menu2"> <a href="javascript:product2();">씰</a> <ul class="gnb-3dep"> <li> <a href="javascript:product2_1();">O-Rings</a>  <ul class="gnb-4dep"> <li><a href="javascript:product2_1_1();">O-Ring</a></li> <li><a href="javascript:product2_1_2();">O-Ring Accessory</a></li> </ul> </li> <li> <a href="javascript:product2_2();">Piston Seals</a>  <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</a>  <ul class="gnb-4dep"> <li><a href="javascript:product2_3_1();">Rod Seals</a></li> </ul> </li> <li> <a href="javascript:product2_4();">Wipers</a>  <ul class="gnb-4dep"> <li><a href="javascript:product2_4_1();">Wipers</a></li> </ul> </li> <li> <a href="javascript:product2_5();">Rotary Seals</a>  <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</a>  <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</a>  <ul class="gnb-4dep"> <li><a href="javascript:product2_7_1();">Flexi Seals</a></li> </ul> </li> </ul> </li>  <li class="sub_menu3"> <a href="javascript:product3();">툴</a> <ul class="gnb-3dep"> <li> <a href="javascript:product3_1();">자동선반 툴</a>  <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();">바이스</a>  <ul class="gnb-4dep"> <li><a href="javascript:product3_2_1();">바이스</a></li> </ul> </li> <li> <a href="javascript:product3_3();">앵글헤드</a>  <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();">보링 툴</a>  <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();">엔드밀</a>  <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();">연삭 휠</a>  <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();">초경소재</a>  <ul class="gnb-4dep"> <li><a href="javascript:product3_7_1();">초경소재</a></li> </ul> </li> <li> <a href="javascript:product3_8();">툴프리세터</a>  <ul class="gnb-4dep"> <li><a href="javascript:product3_8_1();">툴 프리세터</a></li> </ul> </li> <li> <a href="javascript:product3_9();">MQL전용 툴</a>  <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();">윙벤드</a>  <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'); });

#javascript #jquery

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

정렬:

채택된 답변

+20 포인트

웹메이킹

2년 전

다음과 같은 방법으로 시도해 볼 수 있을 것 같습니다

gnb-3dep 안에 li를 클릭할 때, 그 안에 있는 gnb-4dep가 보이도록 설정하면 되지 않을까 합니다.

</p>

<p>var $produc_menu = $('.pd_wide');

var $produc_menu_3dep = $('.pd_wide .product_dep > li');</p>

<p>$produc_menu_3dep.click(function(){

    var $gnb3dep = $(this).children('.gnb-3dep');

    var $gnb4dep = $gnb3dep.find('.gnb-4dep');</p>

<p>    if ($gnb3dep.hasClass('show')) {

        $gnb3dep.removeClass('show');

        $gnb4dep.removeClass('show');

        $(this).removeClass('on');

    } else {

        $gnb3dep.addClass('show');

        $gnb4dep.addClass('show');

        $(this).addClass('on');

    }</p>

<p>    $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');

});

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

itb

2년 전

웹메이킹님 이렇게 하니까! 나오긴하는데 3dep안에있는 4dep이 모두 나오는데.. ㅠㅠ 클릭한 것의 depth만 나와야하는데.. 어카죠? 혹시 오픈채팅가능하실까요?!ㅠ

�

웹메이킹

2년 전

다음과 같이 하면 되지 않을까 합니다.
[code]
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');
}
});
[/code]
이렇게 하면 클릭한 3dep 메뉴만 열리고, 다른 3dep 메뉴는 닫히게되고, 다른 3dep 메뉴와 그에 해당하는 4dep 메뉴를 닫을 때, .not($(this))를 사용하여 현재 클릭한 메뉴를 제외한 다른 3dep와 4dep를 선택 할 수 있을 것으로 보입니다.

오픈채팅방 알려주시면 가능합니다.

itb

2년 전

오오..ㅠㅠ 감사합니다.
https://open.kakao.com/o/s2kSDfMf

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

3차메뉴 jquery 질문합니다ㅠㅠ 채택완료

답변 1개

답변에 대한 댓글 3개

공유하기