Question

所以基本上，我在一个div里面有一个段落，它有很长的文本并隐藏在页面加载上，并且有一个链接读取更多，调用函数显示隐藏的段落但是当显示隐藏的段落时该部分没有自动调整它的高度。

我为此问题创建了一个代码笔：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：

<强>重建（）更新DOM结构以适应新窗口大小或其内容。非常适合与AJAX调用或站点DOM结构中的外部更改结合使用，特别是在使用scrollOverflow时：true。

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

1 个答案: