Question

到目前为止我已经尝试了一些很长的代码。当一个人有少于五或十个div时，这似乎没问题。但是，如果要在20或更多时间实施这些......？

我可以尝试编写任何紧凑形式的代码。

（我是jquery的新手，可以构建复杂的函数但是尝试编写这些类型。）

任何人都可以帮忙..？

守则如下。

      $(document).ready(function(){

      $('.button').click(function() {
      $('.content').hide(500)
  $('.headOne').addClass("classRight");
 $('.content1').show(500)
 });
     $('.button1').click(function() {
     $('.content1').hide(500)
 $('.headTwo').addClass("classRight");
 $('.content2').show(500)
 });

 $('.button2').click(function() {

     $('.content2').hide(500)
 $('.headThree').addClass("classRight");
 $('.content3').show(500)
 });
 $('.button3').click(function() {

     $('.content3').hide(500)
 $('.headFour').addClass("classRight");

    $('.buttonLast').click(function() {
    $('.content').show(500)
 $('.headOne,.headTwo,.headThree, .headFour').removeClass("classRight");});
});

   });

       <doctype html>
        <html>
        <head>
        <title> div collapse</title>
        </head>
        <body>


   <div class="headOne"> Emplyee personal record</div>
   <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum <br />
    <div class="button">Click me</div> 
   <br />
   </div>
  <div  class="headTwo"> Emplyee personal record</div>
   <div class="content1">Pellentesque felis elit, tempor vitae dapibus facilisis, sollicitudin id diam.  <br />
  <br />
  <div class="button1">Click me</div>
  </div>
  <div  class="headThree"> Emplyee personal record</div>
  <div class="content2">Aliquam  id lectus pellentesque viverra<div class="button2">Click me</div></div> 
   <div  class="headFour"> Emplyee personal record</div>
   <div class="content3">Aliquam a magna ac lacus eget porta. Maecenas viverra mi id lectus pellentesque viverra</div>
  <div class="button3">Click me</div><br />
 <br />
  <div class="button4">Go To Previous section </div></div>


  <div class="buttonLast">Go To Previous section </div>




    </body>
  </html>

Answer 1

如果我理解正确，你需要类似于Accordion控件的东西。

在以下网址上查看jQuery UI Accordion：http://jqueryui.com/accordion/

这听起来合理吗？

Answer 2

我使用内置的jQuery函数，稍微使用了你的代码并简化了它。这是HTML：

    <div class="closable"> Employee personal record
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum ullamcorper convallis.
</div></div>
<div  class="closable"> Employee personal record
<div class="content">Pellentesque felis elit, tempor vitae dapibus felis eu erat. <br />
</div></div>
<div  class="closable"> Employee personal record
<div class="content">Aliquam eget porta. Maecenas viverra mi id lectus pellentesque viverra</div></div> 
<div  class="closable"> Employee personal record
<div class="content">Aliquam a magna ac justo accumsan porttitor.</div></div>
<div class="button4">Go To Previous section </div></div>

这是Javascript：

$(document).ready(function(){
$('.content').first().show();
$('.closable').click(function() {
if ($(this).find('div').first().is(':visible')){
    $(this).find('div').first().hide();
    $(this).next().find('div').first().show();
}else{
    $(this).find('div').first().show();
}
});

}）;

CSS：

.content{display:block;}
.content{font-weight: normal; border: 0;display:none;}
.closable{font-weight:bold;border:1px solid #CCC;}

希望这有帮助！

如何使用jquery在上次关闭时使下一个div打开？

2 个答案: