虽然 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”菜单。如果调整窗口大小以进行测试，则必须刷新。

这是一个实时示例：Click Here

这是我的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 
        }
    });
});