3

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

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

我使用 .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 。没做什么。脚本现在应该可以工作了。

IN SHORT 当宽度小于 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;
                } 
            });
4

1 回答 1

0

您可以在窗口上侦听 resize 事件，然后使用宽度来决定您要做什么。我想这样的事情应该有效：

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/

于 2013-06-01T09:43:19.273 回答