我调整屏幕大小时如何删除课程？

Question

我需要在小型设备（＆lt; 992px）上有一个足够活跃的课程。当我们点击大型设备（> 992px）上的“更多”链接时，目前尚未添加类脚活动。我在resize上编写了函数，但它无法正常工作。有什么不妥？............................................... ...

if (jQuery(window).width() < 992) {
  $(document).on('click', '.foot-title', function(e) {
    if ($(this).parent().hasClass('foot-items')) {
      $(this).parent().toggleClass('foot-active');
    }
  });
}

jQuery(window).bind('resize', function() {
  $(document).on('click', '.foot-title', function(e) {
    if ($(this).parent().hasClass('foot-items')) {
      $(this).parent().toggleClass('foot-active');
    }
  });
});

html,
body {
  margin: 0;
  padding: 0;
}

.link {
  text-decoration: none;
  color: #ddd;
}

.menu {
  display: none;
}

.foot-active .menu {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foot-menu foot-items">
  <div class="foot-title">
    <a href="#">More</a>
  </div>
  <div class="menu">
    <div class="menu-item">
      <a href="#"><span class="link">Lorem 1</span></a>
    </div>
    <div class="menu-item">
      <a href="#"><span class="link">Lorem 1</span></a>
    </div>
    <div class="menu-item">
      <a href="#"><span class="link">Lorem 1</span></a>
    </div>
  </div>
  <!-- .b-menu -->
</div>

<div class="foot-menu">
  <div class="foot-title">
    <a href="#">Link</a>
  </div>
</div>

Answer 1

修改不同视口大小的UI时，应使用CSS Media Queries，而不是JS。它们表现得更好，使您的JS代码更加简单和语义化，更不用说如果用户在浏览器中禁用JS，UI就不会被破坏。

要实现您的需求，您可以让您的jQuery代码始终切换类。然后，您可以设置CSS以允许类通过媒体查询影响UI，如下所示：

＆＃13;

＆＃13;

$(document).on('click', '.foot-title', function(e) {
  $(this).closest('.foot-menu').toggleClass('foot-active');
});

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
}

.link {
  text-decoration: none;
  color: #ddd;
}

.menu {
  display: none;
}

@media (max-width: 992px) {
  .foot-active .menu {
    display: block;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foot-menu foot-items">
  <div class="foot-title">
    <a href="#">More</a>
  </div>
  <div class="menu">
    <div class="menu-item">
      <a href="#"><span class="link">Lorem 1</span></a>
    </div>
    <div class="menu-item">
      <a href="#"><span class="link">Lorem 1</span></a>
    </div>
    <div class="menu-item">
      <a href="#"><span class="link">Lorem 1</span></a>
    </div>
  </div>
</div>

<div class="foot-menu">
  <div class="foot-title">
    <a href="#">Link</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;