jQuery - сброс высоты элемента не работает - PullRequest
Новая
       18

jQuery - сброс высоты элемента не работает

1 голос
/ 28 июня 2019

То, что я пытаюсь сделать, это взять высоту выпадающего меню из меню вне холста и установить его в UL, чтобы оно покрывало высоту от того места, где сейчас находится меню. Поэтому, если выпадающее меню имеет большую высоту, элемент div, в котором он находится, должен расширяться, и всегда должен быть виден нижний край.

Если вы щелкнете по Корпоративному несколько раз, затем щелкните по SME, а затем вернетесь к Корпоративному, корпоративное раскрывающееся меню расположено сверху и DIV, а высота не сбрасывается. Мне очень плохо, когда дело доходит до объяснения вещей, поэтому взгляните на сайт здесь: URL сайта

Вот jQuery 

// SLIDE OUT MENU
  $(".menu-blue-bar button").on("click", function(e) {
    $(".menu-blue-bar").toggleClass("menu-slide");
    $(".menu-blue-bar button").toggleClass("is-active");
    $(".menu-blue-bar .fade-in-menu .row").toggleClass("in-view");
    e.preventDefault();
  });

  jQuery(
    "<li class='back-button'><i class='icon icon-carousel-left-arrow'></i></li>"
  ).insertBefore(
    ".menu-blue-bar .main-menu-links .dropdown-menu li:first-child"
  );

  jQuery("li.back-button").on("click", function() {
    jQuery(".menu-blue-bar ul.dropdown-menu").removeClass("show");
    jQuery("ul.navbar-nav").css("height", "");
    console.log("clicked back arrow");
  });

  jQuery(".menu-blue-bar .navbar-nav > li.dropdown").on("click", function() {
    if (!$(".menu-blue-bar ul.dropdown-menu").hasClass("show")) {
      $(".main-menu-links ul.navbar-nav").css({
        height:
          $(this)
            .find("ul.dropdown-menu")
            .height() + "px"
      });
    }
  });

Снимок экрана: ссылка на скриншот

1 Ответ

0 голосов
/ 28 июня 2019

Вы не предоставляете значение при "сбросе" height

jQuery("ul.navbar-nav").css("height", "");

Не является допустимым размером блока в CSS.

Вместо этого попробуйте либо установить высоту на 0, либо initial 

jQuery("ul.navbar-nav").css("height", "initial");

Также слово height должно быть строкой (добавить кавычки). Это 

$(".main-menu-links ul.navbar-nav").css({
        height:
          $(this)
            .find("ul.dropdown-menu")
            .height() + "px"
      });

Должно быть 

$(".main-menu-links ul.navbar-nav").css({
        "height":
          $(this)
            .find("ul.dropdown-menu")
            .height() + "px"
      });

Могло бы быть больше, но начните с этого.

...