虽然 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 
        }
    });
});