Fullpage.js 隐藏和显示内容时不会自动调整该部分的高度

Question

所以基本上，我在 div 中有一个段落，它有很长的文本并在页面加载时隐藏，还有一个 link 阅读更多，它调用函数显示隐藏的段落但是当显示隐藏的段落该部分不会自动调整其高度。

我已经为这个问题创建了一个代码笔：https://codepen.io/Byakugan/pen/yjNJao?editors=0010

$(document).ready(function() {
  //Full page js product tab starts here
  var userdata = $("#usersec").clone();
  var businessdata = $("#businesssec").clone();
  $("#usersec").remove();
  // window.innerHeight = window.innerHeight - 85;
  $("#fullpage").fullpage({
    sectionsColor: ["#fff", "#FFF", "#FFF", "#fff"],
    scrollOverflow: true,
    navigation: true,
    navigationPosition: "right",
    responsiveWidth: 927,
    onLeave: function(index, nextIndex, direction) {
      var leavingSection = $(this);

      //after leaving section 2
      if (direction == "down") {
        $(".trume-header").fadeOut("fast");
        $(".tab-pane").removeClass("active1");
        $(".testimonials-container").addClass("active");
        $(".product-nav-tabs").addClass("product-nav-tabs1");
        $(".content").addClass("content1");
      } else if (direction == "up") {
        $(".trume-header").fadeIn("fast");
        $(".tab-pane").addClass("active1");
        $(".testimonials-container").removeClass("active");
        $(".product-nav-tabs").removeClass("product-nav-tabs1");
        $(".content").removeClass("content1");
      }
    }
  });

  $(document).on("click", ".userclck1,.userclck2", function() {
    $("#fullpage").fullpage.destroy("all");
    $("#fullpage").empty();
    userdata.appendTo("#fullpage");
    $(".userclck1,.userclck2")
      .prev()
      .removeClass("active");
    $(".userclck1,.userclck2").addClass("active");
    $("#fullpage").fullpage({
      sectionsColor: ["#fff", "#FFF", "#FFF", "#fff"],
      scrollOverflow: true,
      navigation: true,
      navigationPosition: "right",
      responsiveWidth: 927
    });
  });

  $(document).on("click", ".businesstab1,.businesstab2", function() {
    $("#fullpage").fullpage.destroy("all");
    $("#fullpage").empty();
    businessdata.appendTo("#fullpage");
    $(".businesstab1,.businesstab2")
      .next()
      .removeClass("active");
    $(".businesstab1,.businesstab2").addClass("active");
    $("#fullpage").fullpage({
      sectionsColor: ["#fff", "#FFF", "#FFF", "#fff"],
      scrollOverflow: true,
      navigation: true,
      navigationPosition: "right",
      responsiveWidth: 927
    });
  });
  //Full page js product tab ends here
});

Answer 1

在显示文本后立即使用 $.fn.fullpage.reBuild()。

详见the fullpage.js documentation：

reBuild() Updates the DOM structure to fit the new window size or its contents. Ideal to use in combination with AJAX calls or external changes in the DOM structure of the site, specially when using scrollOverflow:true.

Fullpage.js 隐藏和显示内容时不会自动调整该部分的高度

Fullpage.js while hiding and showing content doesn't auto resize height of that section

javascript

jquery

height

fullpage.js

autoresize