Question

当光标悬停在我的标题上时，我使用了一些简单的jQuery向我的标题添加了一个类，但是我想在浏览器小于980px时禁用它。我只能找到if和else函数，我无法看到与代码的关系。

这是我的代码和小提琴，以显示它的实际效果：

jQuery(document).ready(function($) {    

    $(".header").hover(function(){

        $(".header").addClass("active"); }, function () {

        $(".header").removeClass("active");

  });

});

我尝试了以下内容，但没有效果：

$(window).resize(function() {
        var scrWidth = $(window).width();

    if(scrWidth < 980) {
        $(".header").removeClass('active'); }

    });
});

Answer 1

我建议如下，我们在添加类之前测试window的宽度：

jQuery(document).ready(function($) {

  // binding the shown anonymous functions to the named
  // events:
  $(".header").on({
    'mouseenter': function() {
      // toggleClass(<class-name>, switch) adds the given
      // class-name only if the switch evaluates as true/truthy:
      $(this).toggleClass('active', $(window).width() > 980);
    },
    'mouseleave': function() {
      // we don't check the width here, because if the given
      // class-name is not present then it generates no errors,
      // if the class-name is present then it is removed:
      $(this).removeClass('active');
    }
  });
});

＆＃13;

jQuery(document).ready(function($) {

  $(".header").on({
    'mouseenter': function() {
      $(this).toggleClass('active', $(window).width() > 980);
    },
    'mouseleave': function() {
      $(this).removeClass('active');
    }
  });
});

＆＃13;

body {
  background-color: pink;
}
.header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-bottom-style: solid;
  border-bottom-width: 1.5px;
  border-bottom-color: #000;
  width: 100%;
  height: 100px;
  transition: all .4s;
}
.header.active {
  background-color: white;
}
.header-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  height: inherit;
  width: 85%;
  max-width: 1600px;
  overflow: hidden;
}
h1 {
  font-size: 25px;
}
.menu-button {
  position: relative;
  display: block;
  width: 45px;
  height: 30px;
  background-color: yellow;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">

  <div class="header-container">

    <h1>Website Logo</h1>

    <span class="menu-button">Button</span>

  </div>

</header>

＆＃13;

JS Fiddle demo

此外，如果jQuery不可用，或者首选纯JavaScript，则可以通过以下方式轻松实现：

function mouseenterFunction() {
  // if window's innerWidth property returns
  // a number greater than 980 (it doesn't
  // return the units of measurement, just
  // the nuber):
  if (window.innerWidth > 980) {

    // we add the 'active' class to the
    // element's classList (an Array-like
    // list of classes on that element):
    this.classList.add('active');
  }
}

function mouseleaveFunction() {

  // because no error is generate if the
  // 'active' class-name is not present
  // there is no penalty for removing
  // the class-name from the classList,
  // so we conduct no check prior to removal:
  this.classList.remove('active');
}

// caching the element in a variable:
var target = document.querySelector('.header');

// binding the named functions as the event-handlers for
// named events 'heard' by the 'target' node:
target.addEventListener('mouseenter', mouseenterFunction);
target.addEventListener('mouseleave', mouseleaveFunction);

＆＃13;

function mouseenterFunction() {
  if (window.innerWidth > 980) {
    this.classList.add('active');
  }
}

function mouseleaveFunction() {
  this.classList.remove('active');
}

var target = document.querySelector('.header');

target.addEventListener('mouseenter', mouseenterFunction);
target.addEventListener('mouseleave', mouseleaveFunction);

＆＃13;

body {
  background-color: pink;
}
.header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-bottom-style: solid;
  border-bottom-width: 1.5px;
  border-bottom-color: #000;
  width: 100%;
  height: 100px;
  transition: all .4s;
}
.header.active {
  background-color: white;
}
.header-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  height: inherit;
  width: 85%;
  max-width: 1600px;
  overflow: hidden;
}
h1 {
  font-size: 25px;
}
.menu-button {
  position: relative;
  display: block;
  width: 45px;
  height: 30px;
  background-color: yellow;
  cursor: pointer;
}

＆＃13;

<header class="header">

  <div class="header-container">

    <h1>Website Logo</h1>

    <span class="menu-button">Button</span>

  </div>

</header>

＆＃13;

JS Fiddle demo

参考文献：

JavaScript的：
- Element.classList。
- EventTarget.addEventListener()。
- Window.innerWidth。
jQuery的：
- on()。

Answer 2

不要禁用它，只需进行检查，只有在浏览器宽度＆gt;执行时才执行。 980。

jQuery(document).ready(function($) {    

    $(".header").hover(function(){
        if ($(window).width() >= 980) {
            $(".header").addClass("active"); 
        }
    }, function () {
        if ($(window).width() >= 980) {
            $(".header").removeClass("active");
        }
    });

});

Answer 3

window.onresize = function(e) {   
   if (e.target.outerWidth < 980){   
       $(".header").removeClass('active');            
   }
}

如何在浏览器窗口小于980px时禁用脚本？

3 个答案: