Question

我基本上希望禁用某个视口大小以上的jquery函数。我已经设置了当导航中的链接被点击导航时，然后滚动出视图。我不认为有必要让任何人明白功能正在做什么，只是因为我只希望它在某个视口大小以下工作。我遇到的问题是它在我不想要的大型视口上这样做。任何帮助将不胜感激

<script> 
    $(document).ready(function(){
        $(".trigger , .close").click(function(){
             $(".showing").slideToggle("slow");   
        });
    });
</script>

Answer 1

确定视口大小后，您可以关闭该事件。

if(viewportSize > 1200){
    $(".trigger, .close").off("click");
}

或者

<script> 
$(document).ready(function(){
    $(".trigger , .close").click(function(){

         if(viewportSize > 1200){
             return;
         }

         $(".showing").slideToggle("slow");   
    });
});
</script>

更新：我测试了使用off（）的可能解决方案，以在某些条件下禁用事件触发。

更新：使用窗口视口大小检查来禁用或重新启用slideToggle。如果希望根据希望代码运行的响应速度以不同的间隔检测窗口大小，则可以降低或增加超时（现在设置为50）。以完整大小运行代码示例，或者不会触发窗口调整大小。

//change this value to trigger
        var maxWidth = 900;

        var assignBehaviourToMenuItems = function($in_target){

            $in_target.find('.trigger').each(function(){
                var $menuItem = $(this);
                $menuItem.on('click', function(evt){
                    evt.stopPropagation();
                    var $showingParent = $(this).parent('.showing');
                    $showingParent.slideToggle("slow");
                });
            });

        };

        var assignBehaviourToMenuContainer = function($in_target){

            $in_target.find('.menuContainer').on('click', function(evt){
                evt.stopPropagation();
                $(this).find(".showing").slideToggle("slow");
            });

        };

        $(document).ready(function(){

            var $myTarget = $('#myTargetContainer');
            var $slideToggleStatus = $('#slideToggleStatus');

            assignBehaviourToMenuItems($myTarget);
            assignBehaviourToMenuContainer($myTarget);


            window.onresize = function(){

                clearTimeout($.data(this, 'windowResiting'));

                $.data(this, 'windowResiting', setTimeout(function(){

                    if(window.outerWidth < 900){

                        if($myTarget.hasClass('disabled') == false){
                            //disable the click event
                            $myTarget.find('.trigger').off();
                            $myTarget.find('.menuContainer').off();

                            $myTarget.addClass('disabled');

                            $slideToggleStatus.text('diabled');

                        }

                    }
                    else{

                        if($myTarget.hasClass('disabled')){
                            //reassign the click events

                            assignBehaviourToMenuItems($myTarget);
                            assignBehaviourToMenuContainer($myTarget);

                            $myTarget.removeClass('disabled');

                            $slideToggleStatus.text('enabled');

                        }

                    }


                }, 50));

            };

            //trigger resize as soon as it loads.
            $(this).trigger('resize');



        });

 body{
            font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
        }

        #myTargetContainer{
            position: absolute;
            top: 0;
            left: 0;
            height: 200px;
            width: 240px;
            border: 2px solid lightblue;
            border-radius: 4px;
            margin: 10px;
            padding: 10px;
        }

        #myTargetContainer.disabled{
        }

        #slideToggleStatus{
            color: green;
            font-weight: bold;
        }
        #myTargetContainer.disabled #slideToggleStatus{
            color: red;
        }


        #myTargetContainer.larger{
            background-color: lightblue;
        }

        ul{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        ul li{
            padding: 4px;
            border-bottom: 1px dashed white;
        }
        ul li:hover{
            background-color: gray;
        }

        .trigger{
            cursor: pointer;
        }

        .menuContainer{
            min-height: 10px;
            border: 1px solid;
            background-color: #d3d3d3;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="myTargetContainer">
    <div class="menuContainer">
        <ul class="showing">
            <li class="trigger">menu 1</li>
            <li class="trigger">menu 2</li>
            <li class="trigger">menu 3</li>
        </ul>
    </div>
    <p>
        slideToggle is <span id="slideToggleStatus">enabled</span>
    </p>
</div>

禁用某个视口大小以上的jquery

1 个答案: