Question

我想知道是否有人可以帮我弄清楚什么样的技术要求，或者是否有人有任何关于如何建立这样一个网站的例子：Full width accordion 我正在尝试建立一个投资组合网站，看起来有点像这样。感谢任何输入

谢谢！

Answer 1

虽然只是隐藏和显示元素，但可以实现手风琴效果。

例如，你可以在点击的折叠元素上使用jQuery和slideToggle，然后在所有其他手风琴元素上使用slideUp来实现非常简单和漂亮的效果。添加一些css或javascript来调整它的大小到屏幕的高度然后使用javascript滚动到它并且你已经完成了很多。

另请注意，该网站使用ajax动态加载内容，而不是将其全部放在一个页面上。这大大减少了网站的大小，并且可以帮助加快初始加载，但是必须在打开时加载每个手风琴窗格。

这是一个非常基本的例子。它没有进行ajax加载，但它会给你带来手风琴效果：https://jsfiddle.net/uw9gaep2/

其中一个窗格的HTML（您希望通过css或样式标记将content div设置为display:none：

<div class="pane">
  <div class="title">
    Thing 1
  </div>
  <div class="content">
    blahblah
  </div>
</div>

jQuery的：

$('.title').on('click', function() {
  // Save the content and title to vars
  var $title = $(this);
  var $content = $title.next('.content');

  // Slide toggle the one we want
  $content.slideToggle('fast', function() {
    // Once it's done scroll to the title (http://stackoverflow.com/a/6677069/1687909)
    $('html, body').animate({
      scrollTop: $title.offset().top
    }, 200);
  });

  // Slide up all the other ones
  $('.content').not($content).slideUp('fast');
});

Answer 2

我做了一个演示，展示了如何使用bootstrap实现类似的功能，一些javascript和一点CSS：

<强> jsfiddle demo

$('a[data-toggle="collapse"]').on('click', function () {
    var $target,
        offset;

    if ($(this).closest('.panel').prev().find('.panel-collapse').hasClass('in')) {
        $target = $(this).closest('.panel').prev().find('a[data-toggle="collapse"]');
        offset = 0;
    } else {
        $target = $(this);
        offset = 36;
    }

    $('html, body').animate({
        scrollTop: $target.position().top - offset
    });
});

CSS（习惯性的Sass / SCSS）：

.panel-group {
  margin-bottom: 0;

  .panel {
    border-radius: 0;

    &+.panel {
      margin-top: 0;
    }

    &-body {
      height: calc(100vh - 90px);
    }
  }
}

.panel-default {
  & > .panel-heading {
    height: 36px;
  }
}

.jumbotron {
  //background-image: url(http://lorempixel.com/800/600);
  background-color: #333;
  background-position: center center;
  background-size: cover;
  margin-bottom: 0;
  height: 100vh;
}

关于你所链接的网站，我所看到的不是它的全宽性质，这很容易实现，而是它的全高度性质，这有点棘手。请注意我在calc()中使用vh和CSS来实现效果。它还没有完全存在（在向上/向下调整窗口大小时出现问题），但作为一个起点它可以工作。

全宽手风琴现场

2 个答案: