JavaScript Onclick下拉菜單不起作用

我想爲網站做一個onclick下拉菜單。當我單擊.dropdown元素時，我希望我的.sublink元素向下滑動，然後當我點擊頁面上的任何其他位置時，.sublink將滑回備份。JavaScript Onclick下拉菜單不起作用

菜單下降，但當我點擊網站上的其他位置時，它不會滑回。

以下是我目前菜單中的代碼。有人可以幫助我嗎？謝謝！

$(function() { 
$('.dropdown').click(function() { 
    $('.sublinks').stop(false, true).hide(); 

    var submenu = $(this).parent().next(); 

    submenu.css({ 
     position: 'absolute', 
     top: $(this).offset().top + $(this).height() + 'px', 
     left: $(this).offset().left + 'px', 
     zIndex: 1000 
    }); 

    submenu.stop().slideDown(300); 



    //click anywhere outside the menu 
    $(document).click(function() { 
     var $el = $(this); 
     $el.not('.dropdown') && $el.slideUp(300); 
    }); 
}); 
});

來源

2013-02-12 Jake Perentosh

在你的代碼，這是點擊文件的任何地方，這將指向一個文件，還沒到發生事件的實際元素。您可以修改您的代碼像下面（使用e.target代替this）：

$(function() { 
    $('.dropdown').click(function() { 
     $('.sublinks').stop(false, true).hide(); 

     var submenu = $(this).parent().next(); 

     submenu.css({ 
      position: 'absolute', 
      top: $(this).offset().top + $(this).height() + 'px', 
      left: $(this).offset().left + 'px', 
      zIndex: 1000 
     }); 

     submenu.stop().slideDown(300); 
    }); 
    //click anywhere outside the menu 
    $(document).click(function(e) {   
      var $el = $(e.target); 
      if(!$el.hasClass('.dropdown') && $el.closest(".dropdown").length == 0 && !$el.hasClass('.sublinks') && $el.closest(".sublinks").length == 0) 
       $('.sublinks:visible').slideUp(300); 
    }); 
});

參見$el.closest(".dropdown").length == 0它是確保點擊發生不是在.dropdown

子元素這裏是它的一個演示。點擊不同的位置並檢查控制檯：http://jsfiddle.net/2ryWF/。你會發現這總是指向文檔

來源

2013-02-12 13:51:56

這是迄今爲止最接近的解決方案...但菜單仍然沒有滑動。無論我點擊什麼，都可以通過此代碼滑出屏幕。幫幫我！ – 2013-02-12 18:23:20

查看更新的代碼。我認爲不會正常工作，但那不是你需要的。另外，將'$（document）.click（function（e）{''''（'。dropdown'）'外部）點擊（function（）{'，否則點擊處理程序將在每次打開時添加到文檔中 – 2013-02-12 18:28:47

以下是我在jsfiddle上的頁面：http://jsfiddle.net/2ryWF/2/請注意，您點擊的任何東西都會滑落並消失;同樣，下拉菜單不會消失，直到您單擊每個鏈接，但是，當我點擊頁面的其他任何地方時，我只想要整個下拉菜單向上滑動。 – 2013-02-12 18:43:55

看起來你的鉤點擊任何地方的下拉菜單點擊鉤內，嘗試這樣的事情（未測試）;

$(function() { 
//click on menu(dropdown div) 
    $('.dropdown').click(function() { 
     $('.sublinks').stop(false, true).hide(); 

     var submenu = $(this).parent().next(); 

     submenu.css({ 
      position: 'absolute', 
      top: $(this).offset().top + $(this).height() + 'px', 
      left: $(this).offset().left + 'px', 
      zIndex: 1000 
     }); 

     submenu.stop().slideDown(300); 
    }); 

//click anywhere in document 
    $(document).click(function() { 
     var $el = $(this); 
     $el.not('.dropdown') && $el.slideUp(300); 
    }); 
});

來源

2013-02-12 13:45:35

嘗試使用blur event：

$('.dropdown').blur(function() { 
    var $submenu = (...); // <- get submenu selector here 
    $submenu.slideUp(); 
});

來源

2013-02-12 13:45:37 Kasyx

我只能說它只能用於表單元素（在這種情況下，.dropdown很可能是div，ul或類似的東西，而不是表單元素），但正如我所看到的（http://www.quirksmode.org/dom/events/blurfocus.html），如果任何元素具有tabindex屬性集合，則可能會發生焦點和模糊事件 – 2013-02-12 17:30:26

JavaScript Onclick下拉菜單不起作用

回答

相關問題