Изменение значка при нажатии на эффект слайд аккордеона - PullRequest
Новая
       10

Изменение значка при нажатии на эффект слайд аккордеона

0 голосов
/ 12 июня 2018

У меня маленькая проблема с иконкой гармошки.При получении коллапса должно отображаться «+», и это должно переключаться на «-».В текущем скрипте он отлично работает, когда нажимаешь переключатель на каждом 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>

Ответы [ 2 ]

0 голосов
/ 12 июня 2018 

$('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>
0 голосов
/ 12 июня 2018

Почти там, отсутствует только $(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>
...