사용자 지정 드롭 다운 메뉴가 링크와 함께 작동하지 않습니다.

Question

찾은 자습서를 사용하여 사용자 지정 메뉴를 만들려고합니다.

내가 겪고있는 문제는 구현이 아니라 링크를 클릭하지 못하게하는 문제입니다. 메뉴를 "열었습니다"라고 말 링크를 클릭하면 메뉴가 닫히고 잠시 후 링크 대신 전체 상자가 강조 표시됩니다.

다음은 몇 가지 스크린 샷입니다. 링크 위로 마우스를 가져갈 수 있지만 (개별 마우스를 클릭하면 자주색으로 바뀝니다) 개별 링크를 클릭하면 해당 페이지로 이동하는 대신 전체 메뉴를 클릭하는 경향이 있습니다. 그러나 그 위에 마우스를 가져 가면 브라우저의 왼쪽 하단에 링크가 표시됩니다. 나는 당신을 페이지로 보내는 URL 대신에 클릭으로 무엇이 일어나고 있는지 알아낼 수 없다.

http://cl.ly/image/0S2F2c3h3g1o (호버 스크린 샷)

http://f.cl.ly/items/3P1h27323B203E2J0N41/clickout.png (clickout)

내가 어떤 링크를 클릭 할 때, 난 그냥이 파란색 상자를 얻을, 그것은 당신을 보내는 대신 메뉴를 닫습니다 링크 된 페이지.

이

내가이 자바 스크립트입니다

<!-- MOBILE MENU/--> 
<nav id="mobile-menu"> 
    <div id="mobmenu" class="dropdown-menu" tabindex="1"> 
     <ul class="dropdown" tabindex="1"> 
      <li><a href="/about">ABOUT</a></li> 
      <li><a href="/work">WORK</a></li> 
      <li><a href="/notes">NOTES</a></li> 
     </ul> 
    </div> 
</nav> 
<!--/MOBILE MENU --> 

엮은 한 HTML이다.

 function DropDown(el) { 
      this.dd = el; 
      this.opts = this.dd.find('ul.dropdown > li'); 
      this.val = ''; 
      this.index = -1; 
      this.initEvents(); 
     } 
     DropDown.prototype = { 
      initEvents : function() { 
       var obj = this; 

       obj.dd.on('click', function(event){ 
        $(this).toggleClass('active'); 
        return false; 
       }); 

       obj.opts.on('click',function(){ 
        var opt = $(this); 
        obj.val = opt.text(); 
        obj.index = opt.index(); 
       }); 
      }, 
      getValue : function() { 
       return this.val; 
      }, 
      getIndex : function() { 
       return this.index; 
      } 
     } 

     $(function() { 

      var dd = new DropDown($('#mobmenu')); 

      $(document).click(function() { 
       // all dropdowns 
       $('.dropdown-menu').removeClass('active'); 
      }); 

     }); 

    </script> 

그리고 CSS.

#mobile-menu { 
    width: 320px; 
} 
.dropdown-menu { 
    background: #050607 url(images/menu_closed.png) no-repeat center top; 
    border: none; 
    color: #FFF; 
    cursor: pointer; 
    height: 50px; 
    font-weight: bold; 
    margin-top: 17px; 
    outline: none; 
    position: fixed; 
    -webkit-appearance: none; 
    width: 320px; 
    z-index: 9999; 
} 
.dropdown-menu::after { 
    content: ""; 
    width: 0; 
    height: 0; 
    position: absolute; 
    right: 16px; 
    top: 50%; 
    margin-top: -6px; 
} 
/* ACTIVE STATE */ 
.dropdown-menu .dropdown { 
    background: #050607; 
    height: 1000px; 
    list-style: none; 
    overflow: hidden; 
    pointer-events: none; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    right: 0; 
    opacity: 0.0; 
} 
.dropdown-menu .dropdown li { 
    position: relative; 
    top: 10px; 
    z-index: 99; 
} 
.dropdown-menu .dropdown li a { 
    border-top: 1px solid #1f1f1f; 
    color: #FFF; 
    display: block; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 30px; 
    font-weight: 200; 
    letter-spacing: 8px; 
    pointer-events: visible; 
    padding: 15px 25px 15px 25px; 
    text-align: center; 
    text-decoration: none; 
    z-index: 9999999999999999999999; 
} 
.dropdown-menu .dropdown li:nth-child(5) { 
    font-size: 15px; 
    font-weight: 100; 
    letter-spacing: 2px; 
    text-align: center; 
} 
.dropdown-menu .dropdown li:hover a { background: #050607; color: #605e90; } 
.dropdown-menu.active .dropdown { 
    -moz-animation: fadein .3s linear; 
    -webkit-animation: fadein .3s linear; 
    -ms-animation: fadein .3s linear; 
    animation: fadein .3s linear; 
    pointer-events: auto; 
    opacity: 1.0; 
    z-index: 999999 !important; 
} 
.dropdown-menu.active:active { 
    pointer-events: auto; 
} 
.dropdown-menu.active::after { 
    border-color: #000; 
    margin-top: -3px; 
} 
.dropdown-menu.active { 
    background: #050607 url(images/menu_open.png) no-repeat center top; 
    outline: none; 
} 

고마워요! : 3

Answer 1

obj.opts 클릭 이벤트 처리기가 발생하면 obj.dd 클릭 이벤트 처리기도 실행됩니다. 이를 방지하려면 처리기에 전달 된 이벤트 객체의 stopPropagation 함수를 호출하십시오.

작동 예제를 보려면 http://jsfiddle.net/hwTUZ/1/