Question

试图使此功能正常工作。 toggleNav可以独立工作。我想根据屏幕尺寸应用不同的打开/关闭功能。导航会根据鼠标事件打开和关闭，因此代码需要在每种屏幕尺寸下连续运行。

arr.map(x => x.item_id);

Answer 1

我猜您是在询问用户调整视图大小时如何进行这项工作。

我建议您重新排列样式，以便在单个父元素（例如：body）上有一个控制该功能的主类，然后您可以通过javascript来打开和关闭该元素。这样，所有样式更改（包括由用户视图大小更改引起的样式更改）均由CSS处理，而javascript只需要管理一个元素。

您没有提供足够的代码来重做您正在做的事情，但是，例如（单击“扩展代码段”并根据需要调整浏览器窗口的大小以尝试宽度）：

$('button').on('click', e => {
  $('body').toggleClass('off');
});

.top:after {
  display:block;
  content:"on";
  color: #080;
}
.bottom:after {
  display:block;
  content:"on";
  color: #080;
}

/* overrides for "off" state */
.off .top:after {
  content:"off";
  color: #800;
}
/* only override css if view width > 720px */
@media (min-width:721px) {
  .off .bottom:after {
    content:"off";
    color: #800;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button">toggle</button>
<div class="top"></div>
<div class="bottom"></div>

结合手机和屏幕功能

1 个答案: