每个人点击toggleslide div内容

Question

jQuery toggle（）

<nav id="bs-navbar">
<ul class="nav navbar-nav">
<li class="one"><a data-type="bio1" href="#">Home</a></li>
<li class="one"><a data-type="bio2" href="#">About</a></li>
<li class="one"><a data-type="bio3" href="#">Services</a></li>
<li class="one"><a data-type="bio4" href="#">contact us</a></li>

</ul>

</nav>

Jquery代码

$(document).ready(function() {

$( ".one" ).click(function() {

$( ".test1" ).slideToggle( "fast" );

var dataType = $(this).attr('data-type');

$("#" + dataType).slideToggle( "fast" );

});

});

Answer 1

您需要使用nav id和ul class点击li和fire事件。你必须使用你的jquery，如

更新后的代码，请检查

$(document).ready(function() {
	
$( "ul.navbar-nav li" ).click(function() {
	
 $( ".test1" ).hide( "fast" );

var dataType = $(this).find('a').attr('data-type');

  $("#" + dataType).slideToggle( "fast" );

});

});

  .test1, .test2{
width:700px; height:300px; background:#4e4e4e; border:4ps solid #fff;
display:none;
clear:both;
  }
  
  #close{
      float:right;
    display:inline-block;
    padding:2px 5px;
    background:#ccc;
	
  }
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
<li class="one"><a data-type="bio1" href="#">Home</a></li>
<li class="one"><a data-type="bio2" href="#">About</a></li>
<li class="one"><a data-type="bio3" href="#">Services</a></li>
<li class="one"><a data-type="bio4" href="#">contact us</a></li>

</ul>

</nav> 



<div id="bio1" class="test1">
  Dummy text goeshere Goes here 1
</div>


<div id="bio2" class="test1">
  Dummy text goeshere Goes here 2
</div>
<div id="bio3" class="test1">

  Dummy text goeshere Goes here 3

</div>