關閉菜單，點擊關閉菜單本身

對於JavaScript而言，我並不是最好的，並且一直在尋找解決方案。我在這裏看到類似的問題，但是當我嘗試在我的情況下實現它時，它會打破菜單或者沒有任何區別。關閉菜單，點擊關閉菜單本身

我想要獲得一個菜單（打開一個點擊），關閉不僅在父菜單選項卡上重複點擊，而且在菜單之外點擊，即在任何地方。

我的代碼是：

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

這個片段是多了很多的JavaScript中，這是默認的工作版本。來自用戶的點擊更改菜單容器的類名，以確定它是否被顯示。從這裏另一職務，我試圖實現以下無濟於事，試圖讓點擊過改變類的名字，以及：

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，因爲我似乎越來越多地使用它。

來源

2012-06-30 Phil Owen

歡迎！請在http://jsfiddle.net上做一個功能正常的演示 –

以防萬一你沒有注意到它...你有$（document）.one（'click'...應該是，不是一個。 –

如果你真的想要使用jQuery，你可以使用'$ .mouseleave（）'來處理開啓/關閉。 –

我希望你仍然在尋找解決方案。下面是我還增加了幾個事件，它開啓或關閉

$('#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中測試，但不應該太難以使它工作在那些，如果它不。

來源

2012-07-05 03:21:54 SMathew

關閉菜單，點擊關閉菜單本身

回答

相關問題