javascript - 使用 jquery 和 css 的响应式按钮

Question

我有一个带有标题的 div，并且在同一 div 中有一个垂直导航菜单。为了使其响应，我使用媒体查询和“显示:无和position:absolute”到导航容器。直到这一步为止它工作得很好。

现在我想要的就是这个。当我单击此标题时，导航菜单会出现，当我单击导航菜单上的链接时，导航菜单消失意味着菜单本身变为“显示:无”

我使用 .toggle() jquery 来实现这一点。当这一切正常时。

但问题是我希望这个 .toggle() 函数在窗口宽度大于 980px 时不起作用；

<h2 id="heading"><span>Office<span class="blue">Managnment</span></span></h2>

<ul id="list">
    <li><a href="#p">P</a></li>
    <li><a href="#a">A</a></li>
    <li><a href="#n">N</a></li>
    <li><a href="#lb">L</a></li>
    <li><a href="#a">A</a></li>
    <li><a href="#r">R</a></li>
    <li><a href="#p">P</a></li>
</ul>

和 JavaScript

$(function () {
    $("#heading").click(function () {
        $("#list").toggle();
    });
    $("#list").click(function () {
        $("#list").toggle('hide');
    });
}); 

是的，我尝试过 if 语句仅在宽度小于 980px 时执行此代码，但问题是它仅在页面加载时检查宽度。即如果加载时窗口小于 980。脚本工作正常。但是当加载时窗口大于 980 时，即使将其大小调整为小于 980 像素，脚本也不起作用。

我不明白如何实现这一目标。主要问题在于选择 if else 语句的条件。

1. 加载窗口并检查宽度

   • 如果小于 980px 则执行脚本
   • 如果大于 980，则不执行脚本。

2. 调整窗口大小时检查新宽度

   • 如果之前超过 980

     • 检查宽度是否增加。如果增加，则不执行任何操作(脚本不应工作)
     • 检查宽度现在是否小于 980 。 启动脚本。脚本现在应该可以运行。

   • 如果之前小于 980。

     • 检查宽度是否增加超过 980。如果增加停止脚本。它现在不应该工作
     • 检查宽度现在是否小于 980 。没做什么。脚本现在应该可以运行了。

简而言之，当宽度小于 980px 时打开切换功能。并关闭开关并设置为在宽度大于 980 像素时显示。

我的理解如下。它可以工作，但有时当我缓慢调整大小时，它的行为会很奇怪。

            var $window = $(window),
                ONLOADtoggleEnabled = false,
                smallscreenbefore = false;

            $window.on('resize', function() {

                if (smallscreenbefore == false && $window.width() > 1220) {


                } else if( smallscreenbefore == false && $window.width() < 1220) {

                    $( "#Tablist" ).hide(400);
                    $( "#heading" ).click(function() {
                                                                $( "#Tablist" ).toggle(400);                    
                            }); 
                            $( "#Tablist" ).click(function() {
                                                                $( "#Tablist" ).toggle(400);                    
                            });
                            smallscreenbefore = true;   

                }
                else if(smallscreenbefore == true && $window.width() > 1220 ) {

                        $( "#heading" ).unbind('click');
                            $( "#Tablist" ).unbind('click');
                            $( "#Tablist" ).show(400);
                            smallscreenbefore = false;

                }
                else if(smallscreenbefore == true && $window.width() < 1220 ) {

                            smallscreenbefore = false;

                }
            });




            var $window = $(window);
            $window.on('load', function() {

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

                            $( "#heading" ).click(function() {
                                                                $( "#Tablist" ).toggle(400);                    
                            }); 
                            $( "#Tablist" ).click(function() {
                                                                $( "#Tablist" ).toggle(400);                    
                            });

                            smallscreenbefore = true;

                }
                else if($window.width() > 1220) {

                    smallscreenbefore = false;
                } 
            });

Answer 1

您可以监听窗口上的调整大小事件，然后使用宽度来决定您想要执行的操作。我想这样的事情应该有效:

var MAX_WIDTH = 980,
    $window = $(window),
    toggleEnabled = false;

$window.on('resize', function() {
    // Check window width and check if toggle isn't already enabled
    if ($window.width() < MAX_WIDTH) {
        // Check if toggle isn't enabled yet
        if (!toggleEnabled) {
            // Use on() to add eventListener
            $("#heading").on('click', function () {
                $("#list").toggle();
            });
            $("#list").on('click', function () {
                $("#list").toggle('hide');
            });

            toggleEnabled = true;
        }
    } else if (toggleEnabled) {
        // Use off() to remove eventListener
        $("#heading").off('click');
        $("#list").off('click');

        // Show the list
        $('#list').show();

        toggleEnabled = false;
    }

    $('#output').text('Width: ' + $window.width() + ', toggleEnabled: ' + toggleEnabled);
});

// You can trigger the resize event at the start to set the initial state of the menu
$window.trigger('resize');

包含您的列表的工作版本:http://jsfiddle.net/srm6p/3/