雖然 jQuery .toggle() 下拉菜單（寬度小於 991px）

Question

我正在嘗試為較小的屏幕切換菜單/子菜單。 (max-width: 991px) When you click the "product" link, the .dropdown menu should show, and when the " accessories " link is selected, the .subdropdown class should show. 輕按菜單的任何位置以在任何深度釋放它們會很好。

注意：在min-width: 991px （桌面）屏幕上， :hover將起作用。

請注意我的 JavaScript 代碼如何不會觸發子“ accessories ”菜單。 如果您調整窗口大小進行測試，則必須刷新。

這是現場示例：單擊此處

這是我的js代碼

$(function() {

    if ($(window).width() < 991) {

        $('#product-link').click(function() {
            $('.dropdown').toggle();
        });

        if ('.dropdown' === true) {
            $('#accessories-link').click(function() {
                $('.subdropdown').show();
            });
        } else {
            $('.dropdown').hide();
        }
    }

});

編輯：雖然不完美，但它有效。 我仍然想使用 .click 而不是 .hover 但這可以完成工作。

$(document).ready(function() { $('.top-menu').hover( function(){ $(this).children('.sub-menu').fadeIn(200); }, function(){ $(this).children('.sub-menu').fadeOut(200); } ); })

Answer 1

您的 if 語句將始終評估為 false。

第 9 行： if ('.dropdown' === true)

Answer 2

在 JQuery 中，您正在特定元素上設置事件偵聽器，但是您當前的設置沒有利用產品鏈接的 on 方法。 嘗試將您的代碼切換為類似

$(function() {
    $('#product-link').on('click mouseover', function(){
        $('.dropdown').toggle();
        if($('#product-link').hasClass('.dropdown')){
            //something else here 
        }
    });
});