单击

Question

第一个.post__slide可见如果我取出.post__menu包裹nav，但是如果我让.post__menu包裹{ {1}}第一个nav 不可见。

要查看它的工作原理，它应删除HTML中的.post__slide包装，您会看到第一个.post__menu可见。

我的问题：如何重构我的JS，以便将.post__slide包装器保留在我的标记中，并且第一个.post__menu可见？

.post__slide

$(function() {
  $('.post nav a').on('click', function() {
    showSlide($(this).index());
  });

  showSlide(0);

  function showSlide(index) {
    // Make the post__slide post__slide--visible
    $('.post .post__slide.post__slide--visible').removeClass('post__slide--visible');
    $('.post .post__slide:nth-of-type(' + (index + 1) + ')').addClass('post__slide--visible');

    // Set the tab to post__nav--selected
    $('.post nav a.post__nav--selected').removeClass('post__nav--selected');
    $('.post nav a:nth-of-type(' + (index + 1) + ')').addClass('post__nav--selected');
  }
});

.post {
  position: relative;
}

.post .post__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100px;
}

.post .post__nav a {
  padding: 20px 0px;
  text-align: center;
  width: 100%;
  cursor: pointer;
}

.post .post__nav a:hover,
.post .post__nav a.post__nav--selected {
  color: #737d8b;
  font-weight: 700;
}

.post .post__slide {
  position: absolute;
  top: 0px;
  left: 100px;
  width: 0px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.1s linear 0s;
}

.post .post__slide.post__slide--visible {
  width: calc(100% - 100px);
  overflow: scroll;
  opacity: 1;
}

Answer 1

如果我理解你的要求，这就是你想要的：

＆＃13;

＆＃13;

$(function() {
  $('.post a').on('click', function(e) {
    e.preventDefault()
    showSlide($(this).index());
  });

  showSlide(0);

  function showSlide(index) {
    // Make the post__slide post__slide--visible
    $('.post .post__slide').removeClass('post__slide--visible');
    $('.post .post__slide').eq(index).addClass('post__slide--visible');

    // Set the tab to post__nav--selected
    $('.post a').removeClass('post__nav--selected');
    $('.post a').eq(index).addClass('post__nav--selected');
  }
});

＆＃13;

.post {
  position: relative;
}

.post a {
  display: block;
  padding: 20px 0px;
  width: 100%;
  cursor: pointer;
}

.post  a:hover,
.post  a.post__nav--selected {
  color: #737d8b;
  font-weight: 700;
}

.post .post__slide {
  position: absolute;
  top: 0px;
  left: 100px;
  width: 0px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.1s linear 0s;
}

.post .post__slide.post__slide--visible {
  width: calc(100% - 100px);
  overflow: scroll;
  opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">
  <div class="post__menu">

    <a>post__slide #1</a>
    <a>post__slide #2</a>
    <a>post__slide #3</a>

  </div>
  <div class="post__slide">
    <p>post__slide #1</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis magna ipsum, nec sodales lectus rutrum eleifend. Mauris laoreet tincidunt erat, nec mattis tellus luctus ac. Vivamus et pulvinar felis, a placerat dui. Aenean ornare, ipsum
      vel aliquet mattis, ante nibh rhoncus erat, in auctor tortor libero quis diam. Cras non purus eget enim dapibus pharetra. Integer eget commodo nisi. Quisque sed pharetra sapien. Suspendisse potenti. Aliquam ligula elit, fermentum a ex ac, porttitor
      fermentum velit. Phasellus quis lacinia nunc. Sed risus neque, venenatis in libero ac, auctor sagittis neque. Suspendisse hendrerit magna in sem mattis eleifend. Praesent vitae hendrerit est.</p>
    <p>Nunc sit amet ante quis eros convallis dictum. Sed pretium viverra vehicula. Fusce elementum sagittis nulla, sed mollis enim cursus sed. Donec quis magna ultrices tellus consectetur pharetra vel vitae lorem. Proin eu fringilla ligula, non mollis felis.
      Cras scelerisque faucibus auctor. Ut auctor rutrum consectetur. Suspendisse in luctus risus. Nam condimentum, est placerat posuere commodo, libero elit maximus turpis, quis auctor mi risus a mauris. Donec rutrum, tortor sit amet viverra lobortis,
      nisi est varius libero, eget vestibulum arcu ex lacinia augue. Integer diam tellus, interdum vitae tellus in, accumsan suscipit velit. Sed ut blandit mauris. Etiam ac arcu eget nisi placerat feugiat. Sed laoreet, diam id iaculis tincidunt, turpis
      ex tristique felis, eu varius sapien lectus at justo. Donec sit amet congue erat. Curabitur nibh neque, dapibus ac placerat nec, maximus sollicitudin est.</p>
  </div>
  <div class="post__slide">
    <p>post__slide #2</p>
    <p>Donec quis tortor vehicula, auctor elit nec, consequat urna. Curabitur hendrerit ipsum erat, fringilla vehicula velit lacinia eget. Suspendisse scelerisque volutpat sapien, et hendrerit est lobortis vitae. Curabitur et ultrices nibh. Sed molestie
      sagittis ante et gravida. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras sit amet ex tincidunt, vulputate lectus at, malesuada nibh.</p>
    <p>Morbi semper, sem non scelerisque pulvinar, felis sapien accumsan quam, a viverra lorem eros et massa. Sed sed tincidunt nunc. Pellentesque semper vulputate lacus eget laoreet. Curabitur ultricies sem ut ullamcorper gravida. Cras ut ex ut dolor blandit
      sollicitudin vel eu tortor. Nulla pulvinar vulputate rutrum. Quisque ligula quam, aliquam pharetra enim non, scelerisque ullamcorper metus. Integer ullamcorper eros eu magna sagittis tempor. Quisque lacus ante, sagittis luctus efficitur quis, varius
      a nunc. Nulla risus ante, blandit sit amet dictum id, tempor sit amet leo. Morbi nec eleifend elit.</p>
  </div>
  <div class="post__slide">
    <p>post__slide #3</p>
    <p>Nulla vitae nulla felis. Donec efficitur arcu id turpis auctor blandit. Cras consequat efficitur eleifend. Phasellus vel justo lectus. Mauris sed lacus ex. In vulputate, tortor ac interdum dapibus, lorem tortor interdum diam, vitae fermentum felis
      nisi id neque. Integer diam elit, ultricies quis suscipit sit amet, rutrum a nulla.</p>
    <p>Donec quis ipsum magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean varius ante sed eros tristique fermentum. Duis sed vulputate tellus, in auctor tellus. Donec sed tempus odio. Nunc hendrerit erat nec dui sollicitudin, et
      ullamcorper enim mattis. Quisque accumsan rutrum turpis ut suscipit. Mauris mi ex, iaculis sit amet dui non, faucibus pellentesque eros. Fusce et congue urna, ac ultricies ipsum. Ut accumsan euismod felis, vel ornare lectus dictum ut. Aenean eget
      velit vulputate, placerat ligula et, maximus mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;