时间戳

首页 > 解决方案 > 组合两个点击函数的方法，当一个点击函数有一个窗口大小的if语句时

javascript - 组合两个点击函数的方法，当一个点击函数有一个窗口大小的if语句时

问题描述

我正在尝试结合两个点击功能来压缩代码，但我不确定如何。谢谢！

$(document).ready(function () {

//when clicking on a link hide the navigation links
$('nav a').click(function () {

    if ($(window).width() < 730) {
        $('nav').toggleClass('showNav');
        $('.navToggle').toggleClass('iconTop');
        $('.navToggle').toggleClass('iconMiddle');
        $('.navToggle').toggleClass('iconBottom');
    }
});

//when clicking on icon hide and show the navigation links
//the icon is only visible when the screen size is less then 730px
$('.navToggle').click(function () {
    $('nav').toggleClass('showNav');
    $('.navToggle').toggleClass('iconTop');
    $('.navToggle').toggleClass('iconMiddle');
    $('.navToggle').toggleClass('iconBottom');
});

});

标签： javascriptjquery

解决方案

像这样的东西会起作用吗？

$('nav a, .navToggle').click(function () {
    if ($(this).hasClass('navToggle') || $(window).width() < 730) {
        $('nav').toggleClass('showNav');
        $('.navToggle').toggleClass('iconTop iconMiddle iconBottom');
    }
});

基本上，您检查单击的元素是否具有 class .navToggle。如果没有，它会在执行操作之前检查窗口大小。

推荐阅读