Question

我有一个带有切换类的按钮 - 只有当borwser大小低于1200px时它才能工作。它在刷新后工作，但不知何故，当我调整窗口大小时，它有时会工作，有时候不能 - 看不到模式。我在开发工具上看到元素是高亮显示的（因此，脚本正在做某事）但我并没有切换类。试图将其更改为addClass / removeClass但结果是相同的。任何建议如何使其工作将不胜感激。

CodePen：http://codepen.io/miunik/pen/oLWOLY

HTML：

<ul class="level-1">
  <li class="btn">1 level item
    <ul class="level-2">
      <li>2 level item</li>
      <li>2 level item</li>
      <li>2 level item</li>
      <li>2 level item</li>
    </ul>
  </li>
</ul>

CSS

ul.level-2 {
  display: none;
}

ul.level-2.open {
  display: block;
}

jQuery的：

$(document).ready(function() {
  function setNav() {
    if (window.outerWidth < 1200) {
      $('.btn').on({
        click: function() {
          $(this).children('.level-2').toggleClass('open');
        }
      });
    }
  }
  setNav()
  $(window).resize(function() {
    setNav();
    console.log(window.outerWidth);
  });
});

Answer 1

您的代码的问题在于，您绑定了许多事件处理程序：每次发生窗口import UIKit import AKPickerView class ViewController: UIViewController, AKPickerViewDelegate, AKPickerViewDataSource { var myArray = ["one","two","three"] @IBOutlet var pickerView: AKPickerView! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. self.pickerView = AKPickerView(frame: CGRect.zero) self.pickerView.delegate = self self.pickerView.dataSource = self } func numberOfItemsInPickerView(pickerView: AKPickerView!) -> UInt { return UInt(self.myArray.count) } func pickerView(pickerView: AKPickerView!, titleForItem item: Int) -> String!{ return self.myArray[item] } func pickerView(pickerView: AKPickerView, didSelectItem item: Int) { // no set up yet } }事件时，每个resize标记（不仅是级别1中的标记）都会获得一个新标记一。因此，如果<li>实际切换或不切换，则取决于事件处理程序的数量。

我只会绑定一个处理程序，最好是在文档上与一个选择器绑定，该选择器仅标识toggleClass()正下方的<li>标记，并在此处理程序中询问屏幕大小。你甚至不需要一个.level-1处理程序。

resize

请参阅此处的工作示例：https://jsfiddle.net/wu1unvek/

如果窗口变大，你可能希望$(document).ready(function() { $(document).on("click", ".btn", function () { if (window.outerWidth < 1200) { $(this).children('.level-2').toggleClass('open'); } }); });处理程序删除resize()类：

open

编辑：改编为修改后的问题代码：使用$(window).resize(function () { if (window.outerWidth >= 1200) { $(".level-2").removeClass("open"); } });代替.btn

编辑2 ：添加了.level-1 > li如果窗口变大则重置resize()类的示例

基于浏览器宽度（调整大小）通过jQuery在cilck上切换Class

1 个答案: