Переключение между несколькими div и перемещение текста в один блок - PullRequest
Новая
       151

Переключение между несколькими div и перемещение текста в один блок

0 голосов
/ 06 августа 2020

У меня есть скрипка, над которой я работаю, и я не могу понять, как показать (переключить) содержимое внутри черного блока, который я сделал +, одновременно переключая знаки «+» и «-» для НАЖАТЫЙ div ..

Пример структуры: 

$('.column_column > div > div').hide();

$('.column_column h4').click(function(e){
    
    e.preventDefault();
    // hide all span
    var $this = $(this).parent().find('div');
    $(".column_column > div > div").not($this).hide();
    
    // here is what I want to do
    $this.toggle();
    
});
.sp_appear {
  background: black;
  color: #FFF;
  display: block;
  float: left;
  width: 100%;
  min-height: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column_column">
  <div class="column_attr">
  
    <h4 href="">element1
      <span class="sp_toggle_icon">+</span>
    </h4>
    
    <div>content 1</div>
    
  </div>
</div>

<div class="column_column">
  <div class="column_attr">
  
    <h4 href="">element2
      <span class="sp_toggle_icon">+</span>
    </h4>
    
    <div>content 2</div>
    
  </div>
</div>

<div class="column_column">
  <div class="column_attr">
  
    <h4 href="">element3
      <span class="sp_toggle_icon">+</span>
    </h4>
    
    <div>content 3</div>
    
  </div>
</div>

<div class="column_column">
  <div class="column_attr">
  
    <h4 href="">element4
      <span class="sp_toggle_icon">+</span>
    </h4>
    
    <div>content 4</div>
    
  </div>
</div>


<div class="sp_appear"></div>

Кто-нибудь может помочь? Прикрепление кода - https://jsfiddle.net/kp9d0vfb/

1 Ответ

0 голосов
/ 06 августа 2020

Это то, что вы хотите? 

$('.column_column > div > div').hide();

$('.column_column h4').click(function(e){
        
    e.preventDefault();
    // hide all span
    var $this = $(this).parent().find('div');
    $(".column_column > div > div").not($this).hide();
        
    // here is what I want to do
    $this.toggle();
        
    $(this).find("span").text(($(this).find("span").text() == "-") ? "+" : "-");
});
 

.sp_appear {
    background: black;
    color: #FFF;
    display: block;
    float: left;
    width: 100%;
    min-height: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column_column">
  <div class="column_attr">
  
    <h4 href="">element1
      <span class="sp_toggle_icon">+</span>
    </h4>
    
    <div>content 1</div>
    
  </div>
</div>

<div class="column_column">
  <div class="column_attr">
  
    <h4 href="">element2
      <span class="sp_toggle_icon">+</span>
    </h4>
    
    <div>content 2</div>
    
  </div>
</div>

<div class="column_column">
  <div class="column_attr">
  
    <h4 href="">element3
      <span class="sp_toggle_icon">+</span>
    </h4>
    
    <div>content 3</div>
    
  </div>
</div>

<div class="column_column">
  <div class="column_attr">
  
    <h4 href="">element4
      <span class="sp_toggle_icon">+</span>
    </h4>
    
    <div>content 4</div>
    
  </div>
</div>


<div class="sp_appear"></div>
...