首页 文章

单击我的手风琴幻灯片效果时更改图标

提问于
浏览 次
0

我的手风琴图标有点问题 . 当崩溃时，它应显示为“”，这应切换为“ - ” . 当前脚本在单击每个div上的切换时工作正常，但是当第一个div体扩展并且当您单击另一个div时，图标“”应为“ - ” . 换句话说，当身体展开时，图标应为“ - ”，折叠时图标应为“” .

$('body').on('click', 'div.title', function () {
  $(this).addClass('active').next().slideUp('normal');          
  var nextDiv = $(this).next();      
  var divBody = $('div.body-content');
  var divTitle = $('div.title');
  if(divBody.is(':visible')) {        
    $(divBody).prev().removeClass('active');        
  }
  if((nextDiv.is(divBody)) && (!nextDiv.is(':visible'))) { 
    $(divBody).slideUp('normal');
    nextDiv.slideDown('normal');
  }
});

div.title {
  width: 150px;
  border: 2px solid black;
  padding: 10px;
  margin-bottom: 10px;
}

div.body-content {
  display: none;
  width: 150px;
  margin: 0 10px 10px;
}

div.title:after {
  content: '+';
  float: right;
}

div.title.active:after {
  content: '-';
  float: right;
}

<div>         
  <div class="title">Accordion Header 1</div> 
  <div class="body-content">  
    <div>Accordion content 1a</div> 
    <div>Accordion content 1b</div>
    <div>Accordion content 1c</div>
  </div>
</div> 
<div>         
  <div class="title">Accordion Header 2</div>           
  <div class="body-content">  
    <div>Accordion content 2a</div> 
    <div>Accordion content 2b</div>
    <div>Accordion content 2c</div>
  </div>
</div>
<div>         
  <div class="title">Accordion Header 3</div>           
  <div class="body-content">  
    <div>Accordion content 3a</div> 
    <div>Accordion content 3b</div>
    <div>Accordion content 3c</div>
  </div>
</div>
<div>         
  <div class="title">Accordion Header 4</div>           
  <div class="body-content">  
    <div>Accordion content 4a</div> 
    <div>Accordion content 4b</div>
    <div>Accordion content 4c</div>
  </div>
</div>

<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
jquery html css accordion

2 回答

  • 1

    几乎在那里，在最后一个条件中缺少 $(this).addClass('active'); ，这将给最后点击的一个减去：

    $('body').on('click', 'div.title', function () {
  $(this).addClass('active').next().slideUp('normal');          
  var nextDiv = $(this).next();      
  var divBody = $('div.body-content');
  var divTitle = $('div.title');
  if(divBody.is(':visible')) {
    $(divBody).prev().removeClass('active');
  }
  if((nextDiv.is(divBody)) && (!nextDiv.is(':visible'))) {
    $(this).addClass('active'); /* added */
    $(divBody).slideUp('normal');
    nextDiv.slideDown('normal');
  }
});

    div.title {
  width: 150px;
  border: 2px solid black;
  padding: 10px;
  margin-bottom: 10px;
}

div.body-content {
  display: none;
  width: 150px;
  margin: 0 10px 10px;
}

div.title:after {
  content: '+';
  float: right;
}

div.title.active:after {
  content: '-';
  float: right;
}

    <div>         
  <div class="title">Accordion Header 1</div> 
  <div class="body-content">  
    <div>Accordion content 1a</div> 
    <div>Accordion content 1b</div>
    <div>Accordion content 1c</div>
  </div>
</div> 
<div>         
  <div class="title">Accordion Header 2</div>           
  <div class="body-content">  
    <div>Accordion content 2a</div> 
    <div>Accordion content 2b</div>
    <div>Accordion content 2c</div>
  </div>
</div>
<div>         
  <div class="title">Accordion Header 3</div>           
  <div class="body-content">  
    <div>Accordion content 3a</div> 
    <div>Accordion content 3b</div>
    <div>Accordion content 3c</div>
  </div>
</div>
<div>         
  <div class="title">Accordion Header 4</div>           
  <div class="body-content">  
    <div>Accordion content 4a</div> 
    <div>Accordion content 4b</div>
    <div>Accordion content 4c</div>
  </div>
</div>

<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
    回复于
  • 0
    $('body').on('click','.title', function () {
      $('.title').removeClass('active'); 
      $(this).addClass('active');
      $(this).next().slideUp('normal');   
      
      var nextDiv = $(this).next();      
      var divBody = $('.body-content');
      var divTitle = $('.title');
     
      
      if((nextDiv.is(divBody)) && (!nextDiv.is(':visible'))) { 
        $(divBody).slideUp('normal');
        nextDiv.slideDown('normal');
      }
    });

    .title {
        width: 150px;
        border: 2px solid black;
        padding: 10px;
        margin-bottom: 10px;
    }
    div.body-content {
        display:none;
        width: 150px;
       margin: 0 10px 10px;
    }
    
    .title:after {
      content:'+';
      float:right;
    }
    
   
    .title.active:after {
      content:'-';
      float:right;
    }

    <div>         
      <div class="title">Accordion Header 1</div> 
      <div class="body-content">  
          <div>Accordion content 1a</div> 
          <div>Accordion content 1b</div>
          <div>Accordion content 1c</div>
      </div>
    </div> 
    <div>         
      <div class="title">Accordion Header 2</div>           
      <div class="body-content">  
          <div>Accordion content 2a</div> 
          <div>Accordion content 2b</div>
          <div>Accordion content 2c</div>
      </div>
    </div>
    <div>         
      <div class="title">Accordion Header 3</div>           
      <div class="body-content">  
          <div>Accordion content 3a</div> 
          <div>Accordion content 3b</div>
          <div>Accordion content 3c</div>
      </div>
    </div>
    <div>         
      <div class="title">Accordion Header 4</div>           
      <div class="body-content">  
          <div>Accordion content 4a</div> 
          <div>Accordion content 4b</div>
          <div>Accordion content 4c</div>
      </div>
    </div>


<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
    回复于

相关问题