jQuery的隱藏下拉菜單

我有一個下拉菜單，與下列jQuery腳本顯示：jQuery的隱藏下拉菜單

jQuery(document).ready(function($) { 
    $('#block-mln-main-menu li').click(function(){ 
     $(this).find('.test').toggle(); 
    }); 
});

當用戶點擊其他地方在頁面上我想實現的是，它的幻燈片或遮擋。對於如何實現這一點，我毫不知情。

任何幫助，非常感謝。

加入了小提琴：http://jsfiddle.net/aL7Xe/999/

來源

2017-01-24 Blomkfist174

的onblur當一個元素失去焦點事件觸發。 –

同比上的任何地方可以嘗試停止傳播事件。

CSS：

.showup{width:100px;height:100px; background:red; display:none;} 
.click{cursor:pointer;}

HTML

<div class="click">click me</div> 
<div class="showup">Click somewhere else!</div>

JQUERY

$(document).ready(function(){ 
$('.click').click(function(event){ 
    event.stopPropagation(); 
    $(".showup").slideToggle("fast"); 
}); 
$(".showup").on("click", function (event) { 
    event.stopPropagation(); 
}); 
}); 

$(document).on("click", function() { 
    $(".showup").hide(); 
});

來源

2017-01-24 16:16:12

你能告訴我你在這個小提琴中的含義嗎？ http://jsfiddle.net/aL7Xe/999/ – Blomkfist174

像這樣的東西http://jsfiddle.net/aL7Xe/1010/ 你只需要爲生產菜單中的每個子菜單重複相同的行爲。 –

太棒了！我會看看。 – Blomkfist174

切換隻會用戶點擊運行它在同一對象上它，你想隱藏它，當點擊其他地方嘗試

jQuery(document).ready(function($) { 
    $(this).not('#block-mln-main-menu li').click(function(){ 
     $(this).find('.test').hide(); 
    }); 
});

來源

2017-01-24 16:03:16

這並不是我真正想要的，當用戶點擊它時，我需要展開下拉菜單，當用戶再次單擊它時，或者當用戶在下拉菜單外單擊時，它應該關閉。 – Blomkfist174

我的理解是，你想展示當用戶點擊它時下拉菜單。如果用戶再次點擊它或頁面上的任何地方，它應該關閉。

CSS

.hide { 
    display: none; 
}

$('.menu-label').on('click', function() { 
    $('.drop-down-menu').toggleClass('hide'); 
});

隱藏菜單，當用戶點擊頁面

$('body').on('click', function() { 
    $('.drop-down-menu').addClass('hide'); 
});

來源

2017-01-24 16:10:13

這正是我需要的，但1小時後仍然無法正常工作。你可能會創造一個小提琴，這樣我可以更好地理解？ – Blomkfist174

我在[codepen]（http://codepen.io/vaibhaviiit/pen/yYbPez）上創建了這個。在這裏任何幫助ping。 –

我已經對您的代碼進行了一些修改，請查看http://jsfiddle.net/fryy0kve/3/ –

jQuery的隱藏下拉菜單

回答

相關問題