2012-06-30 4 views
1

JavaScript와 관련하여 나는 최선이 아니므로 해결책을 찾아야합니다. 비슷한 질문을 여기에서 보았습니다. 그러나 제 경우에 구현하려고 할 때 메뉴가 깨지거나 아무런 효과가 없습니다.메뉴를 클릭하여 메뉴를 닫으십시오.

부모 메뉴 탭을 반복해서 클릭하는 것뿐만 아니라 메뉴 외부를 클릭하여 (즉, 어디서나) 메뉴를 닫으려고합니다.

내 코드는 다음과 같습니다

var toggleUpdatesPulldown = function(event, element, user_id) { 
    if(element.className=='updates_pulldown') { 
     element.className= 'updates_pulldown_active'; 
     showNotifications(); 
    } else { 
     element.className='updates_pulldown'; 
    } 
} 

이 조각은 더 많은 자바 스크립트의 중간에이은 기본 작업 버전입니다. 사용자가 클릭하면 표시되는지 여부를 결정하는 메뉴 컨테이너의 클래스 이름이 변경됩니다. 이 태클에

var toggleUpdatesPulldown = function(event, element, user_id) { 
    if(element.className=='updates_pulldown') { 
     element.className= 'updates_pulldown_active'; 
     showNotifications(); 
    } else { 
     element.className='updates_pulldown'; 
    } 

    ev.stopPropagation(); 

    $(document).one('click', function() { 
     element.className='updates_pulldown'; 
    }); 
} 

어떤 조언 : 여기에 또 다른 포스트에서, 나는뿐만 아니라 클래스 이름을 변경하기 위해 클릭을 시도 할 수 있도록 아무 소용이 다음을 구현하는 시도? 더 많은 JavaScript를 배우고 싶습니다. 점점 더 많은 JavaScript를 배우는 것처럼 보입니다.

+0

Welcome! http://jsfiddle.net에서 작동하는 데모를 만드십시오. –

+0

당신이 그것을 알아 채지 못했을 경우를 대비해서 ... $ (document) .one ('click'...)이 있어야합니다. 하나가 아닌 –

+0

실제로 jQuery를 사용하고자한다면'$ .mouseleave()'를 사용하여 개폐를 처리 할 수 ​​있습니다. –

답변

0

아직 해결책을 찾고 계시기를 바랍니다. 여기에 내가 또한 열거 나

$('#menu>ul>li>a').on('open', function(e) { 
    console.log('menu open', this) 
}).on('close', function(e) { 
     console.log('menu closed', this) 
}) 

죄송합니다,이 jQuery를에 따라 종료 할 때 사용할 수있는 이벤트의 몇 가지를 추가 한이 http://jsfiddle.net/sU9ZJ/6/

(function(win, doc) { 
    var lis = $('#menu>ul>li>a').on('click', function(e) { 
    e.preventDefault(); 
    var a = $(this); 
    var li = $(this).parent(); 
    function close(dev) { 
     if (!(dev && li.has(dev.target)[0])) { 
     li.addClass('inactive').removeClass('active'); 
     doc.off('click', close); 
     a.trigger('close'); 
     } 
    } 
    function open(dev) { 
     li.addClass('active'); 
     doc.on('click', close); 
     a.trigger('open'); 
    } 
    if (li.hasClass('active')) { close() } 
    else { open(); }   
    })  
})(this, $(document)) 

의 작업 데모입니다. 너무 게으른 네이티브 버전을 작성 :). 또한 이것은 IE에서 테스트되지 않았지만 그렇지 않은 경우에는 제대로 작동하지 않아야합니다.

관련 문제