Onclick recree div open close exsting

Question

我正在尝试创建一组open和close div。请查看以下

如果我点击任何链接，它将打开相应的div，但如果之前有任何div打开，它将关闭并打开当前div点击。如果我点击它会关闭。

.content{
display:none;
}

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>

<div class="maindiv">
<div class="content link1">Div link 1</div>
<div class="content link2">Div link 2</div>
<div class="content link3">Div link 3</div>
<div class="content link4">Div link 4</div>	
</div>

Answer 1

尝试下面的代码段

$('li a').on('click', hideShow);

function hideShow() {
  if($('.'+this.textContent.replace(/\s/g,'').toLowerCase()).hasClass('content')) {
    $('.'+this.textContent.replace(/\s/g,'').toLowerCase())[0].classList.remove('content');
  } else {
    $('.'+this.textContent.replace(/\s/g,'').toLowerCase())[0].classList.add('content');
  }
}

.content{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>

<div class="maindiv">
<div class="content link1">Div link 1</div>
<div class="content link2">Div link 2</div>
<div class="content link3">Div link 3</div>
<div class="content link4">Div link 4</div>	
</div>

根据您的要求更新：

$('li a').on('click', hideShow);

function hideShow() {
  if($('.'+this.textContent.replace(/\s/g,'').toLowerCase()).hasClass('content')) {
  $('.maindiv > div').addClass('content');
    $('.'+this.textContent.replace(/\s/g,'').toLowerCase()).removeClass('content');
  } else {
    $('.'+this.textContent.replace(/\s/g,'').toLowerCase()).addClass('content');
  }
}

.content{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>

<div class="maindiv">
<div class="content link1">Div link 1</div>
<div class="content link2">Div link 2</div>
<div class="content link3">Div link 3</div>
<div class="content link4">Div link 4</div>	
</div>

你可以为div的背景设置动画，如下所示

$('li a').on('click', hideShow);

function hideShow() {
  if($('.'+this.textContent.replace(/\s/g,'').toLowerCase()).hasClass('content')) {
  $('.maindiv > div').addClass('content');
    $('.'+this.textContent.replace(/\s/g,'').toLowerCase()).removeClass('content');
  } else {
    $('.'+this.textContent.replace(/\s/g,'').toLowerCase()).addClass('content');
  }
}

.content{
display:none;
}

.divs{
background-color: lavender;
-webkit-animation: slide 1s ease 3.5s forwards;
}

@-webkit-keyframes slide /* Safari and Chrome */
{
from {height: 0;}
to {height: 300px;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>

<div class="maindiv">
<div class="content divs  link1">Div link 1</div>
<div class="content divs link2">Div link 2</div>
<div class="content divs link3">Div link 3</div>
<div class="content divs link4">Div link 4</div>	
</div>