3차메뉴 jquery 질문합니다ㅠㅠ

3차메뉴 jquery 질문합니다ㅠㅠ

QA

3차메뉴 jquery 질문합니다ㅠㅠ

답변 1

본문

안녕하세요. 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');
  });
 

 

 

#javascript #jquery

이 질문에 댓글 쓰기 :

답변 1

웹메이킹 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

118.♡.♡.157

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

 

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');
});

 

웹메이킹님의 댓글
↳ 웹메이킹 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색
118.♡.♡.157

다음과 같이 하면 되지 않을까 합니다. 


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를 선택 할 수 있을 것으로 보입니다.

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

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 2,662
문의 PC 버전
© SIRSOFT
현재 페이지 제일 처음으로