Question

当窗口宽度小于400px时，我运行了一些代码。它将UL转换为select下拉列表以节省空间，并为移动用户提供选定组的本机界面。

我担心当人们将窗口从小到大再重新调整大小时，这会破坏。如果窗口宽度大于400px，如何在调整大小时重置代码？

以下是将我的html转换为select：

的代码

    if($(window).width() < 400){ //if we're on a narrow screen

      $('section ul',this.$element).hide();

      // Create the dropdown base
      $("<select />").appendTo(".continents",this.$element);

      // Create default option "Go to..."
      $("<option />", {
        "selected": "selected",
        "value"   : "",
        "text"    : $('.continents span.selected',this.$element).text()
      }).appendTo(".continents select",this.$element);

      // Populate dropdown with menu items
      $(".continents li a",this.$element).each(function() {
        var el = $(this);
        $("<option />", {
          "value"   : el.attr("href"),
          "text"    : el.text()
        }).appendTo(".continents select",this.$element);
      });

      $(".continents select",this.$element).change(function() {

      //get the value of the selected item
      var selectVal = $(this).find("option:selected").val();

      //when the select changes, do this

      $("<select />").appendTo('.countries',this.$element);

      // Create default option "Go to..."
      $("<option />", {
        "selected": "selected",
        "value"   : "",
        "text"    : $('.countries span.selected',this.$element).text()
      }).appendTo(".countries select",this.$element);

      // Populate dropdown with menu items
      $(selectVal+" li a",this.$element).each(function() {
        var el = $(this);
        $("<option />", {
          "value"   : el.attr("href"),
          "text"    : el.text()
        }).appendTo(".countries select",this.$element);
      });

      $(".countries select",this.$element).change(function() {

        //get the value of the selected item
        var selectVal = $(this).find("option:selected").val();

        //when the select changes, do this

        $("<select />").appendTo('.languages',this.$element);

        // Create default option "Go to..."
        $("<option />", {
          "selected": "selected",
          "value"   : "",
          "text"    : $('.languages span.selected',this.$element).text()
        }).appendTo(".languages select",this.$element);

        // Populate dropdown with menu items
        $(selectVal+" li a").each(function() {
          var el = $(this);
          $("<option />", {
            "value"   : el.closest('li').data('val'),
            "text"    : el.text()
          }).appendTo(".languages select",this.$element);
        });

        $(".languages select",this.$element).change(function() {
            var selectVal = $(this).find("option:selected").val();
            $('#continue',this.$element).removeClass('disabled');
            $('#continue',this.$element).attr('href', selectVal);
        });

      });

    });

  }

Answer 1

您可以将<ul>保存到变量，并在窗口高于400px时将<select>替换为它。

  $ul = $('.continents ul');

  // on.('resize... 
  if($(window).width() < 400) {
     // Your function
  } else if (!$('.continents ul').length) {
     $('.continents select').replaceWith($ul);
  }

将UL转换为SELECT for mobile，然后再调整大小

1 个答案: