Question

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

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

我用.toggle（）jquery来实现这个目的。当这完全正常时。

但问题是，当窗口的宽度超过980px时，我希望这个.toggle（）函数不起作用;

<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时，即使将其大小调整为小于980px，脚本也不起作用。

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

加载窗口并检查宽度
- 如果小于980px则执行脚本
- 如果超过980则不执行脚本。
在调整窗口大小时检查新宽度
- 如果以前是980以上
  - 检查宽度是否增加。如果它增加了什么都不做（脚本不应该工作）
  - 检查宽度是否小于980。 启动脚本。脚本现在可以正常工作。
- 如果它低于980，则
  - 检查宽度是否增加超过980.如果增加停止脚本。它现在不能正常工作
  - 检查宽度是否小于980。没做什么。脚本现在应该可以工作了。

IN SHORT在宽度小于980px时打开切换功能。然后关闭切换开关并设置为宽度超过980px时显示。

我想出来如下。它有效，但有时当我慢慢地调整大小时，它表现得很奇怪。

            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

您可以在窗口上侦听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/

使用jquery和css的响应按钮

1 个答案: