Dynamic Toggle Div Slider

Question

如果您点击侧栏中的按钮，它会在侧边栏右侧的内容部分中显示/滑动一些文字。我还想通过单击按钮来切换它（如果这有意义的话）。

任何帮助都会非常感激。

这就是我到目前为止：小提琴：https://jsfiddle.net/fymjqonc/4/

$(function($) {
  $('.show').click(function() {
    $('.toggle').hide();
    $('#' + $(this).data('toggle')).show();
  });
  $('[data-toggle="item1"]').click();
});

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 20px;
}

.nav {
  background: lightgrey;
  color: #FFF;
}

.nav ul {
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <nav class="nav">
    <ul>
      <li><a href="#" class="show" data-toggle="item1">Item 1</a></li>
      <li><a href="#" class="show" data-toggle="item2">Item 2</a></li>
      <li><a href="#" class="show" data-toggle="item3">Item 3</a></li>
      <li><a href="#" class="show" data-toggle="item4">Item 4</a></li>
      <li><a href="#" class="show" data-toggle="item5">Item 5</a></li>
    </ul>
  </nav>
  <div class="content">
    <div class="toggle" id="item1">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni rerum repellat sed quo eum consequuntur aliquid nobis dolore tempore. Enim.</p>
    </div>
    <div class="toggle" id="item2">
      <p>Step 2</p>
    </div>
    <div class="toggle" id="item3">
      <p>Step 3</p>
    </div>
    <div class="toggle" id="item4">
      <p>Step 4</p>
    </div>
    <div class="toggle" id="item5">
      <p>Step 5</p>
    </div>
  </div>

Answer 1

您好抱歉，但我真的不明白您想要做什么，但请看一下这个突出显示的菜单的代码段代码。

$(function($) {
  $('nav ul li').click(function() {
  	let index = $('nav ul li').index(this) + 1,
    		list = $('nav ul li');
    
    list.removeClass('active');
    $('.content div').slideUp();
    $(this).addClass('active');
    $('.content div:nth-child('+ index +')').slideDown();
 		
  });
});

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 20px;
}

.nav {
  background: lightgrey;
  color: #FFF;
}

.nav ul {
  list-style: none;
}

.active {
  background: blue;
}

.content > div  {
  display: none;
}

.content > div:first-child {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <nav class="nav">
    <ul>
      <li><a href="#" >Step 1</a></li>
      <li><a href="#" >Step 2</a></li>
      <li><a href="#"  >Step 3</a></li>
      <li><a href="#"  >Step 4</a></li>
      <li><a href="#"  >Step 5</a></li>
    </ul>
  </nav>

  <div class="content">
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni rerum repellat sed quo eum consequuntur aliquid nobis dolore tempore. Enim.</p>
    </div>
    <div >
      <p>Step 2</p>
    </div>
    <div >
      <p>Step 3</p>
    </div>
    <div >
      <p>Step 4</p>
    </div>
    <div >
      <p>Step 5</p>
    </div>
  </div>

</div>