Использование data() [дубликат]

175
21 мая 2018, 20:00

На данный вопрос уже ответили:

  • Как в javascript “закрывать” div при клике вне этого дива? 4 ответа

Как сделать так, чтобы при нажатии на один блок, закрывался другой(тот который был открыт ранее). А так же, чтобы блок закрывался и при нажатии на самого себя. Заранее спасибо. Есть код:

if (screen.width <= 991) {
    $(".reviews-tab-items-content").unbind(); 
    $(".reviews-tab-items-content").on('click',function(e){
        console.log('ttttttttttttttww');
        $(this).find(".hidden-text").slideToggle();
    });
}
Answer 1

Можно например вот так: В data-close вставляем селектор, который при клике на объект закроется

$(document).on('ready', function(){ 
 
  $(".item").on('click', function(){ 
    //Если блок по которому кликаем скрыт показываем его 
    if($(this).find('.toggle-content').css('display') == 'none'){ 
      //Скрываем все toggle-content 
      $(".toggle-content").hide(); 
      //Показываем текущий 
      $(this).find(".toggle-content").show(); 
    }else{ 
      //Инчае скрываем все 
      $(".toggle-content").hide(); 
    } 
     
  }); 
 
});
.item{ 
  background: gray; 
  padding: 10px; 
  margin: 0 0 10px 0; 
  color: #fff; 
  cursor: pointer; 
} 
 
.toggle-content{ 
display: none; 
padding: 15px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="item"> 
1) Lorem ipsum dolor sit amet. Первый блок, при клике закроет второй 
  <div class="toggle-content"> 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis nisi quis dolor ullamcorper dapibus. Praesent malesuada augue tincidunt erat congue rhoncus.  
  </div> 
</div> 
 
 
<div class="item"> 
2) Lorem ipsum dolor sit amet. Второй закроет третий 
  <div class="toggle-content"> 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis nisi quis dolor ullamcorper dapibus. Praesent malesuada augue tincidunt erat congue rhoncus.  
  </div> 
</div> 
 
<div class="item"> 
3) Lorem ipsum dolor sit amet. Третий закроет первый 
  <div class="toggle-content"> 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis nisi quis dolor ullamcorper dapibus. Praesent malesuada augue tincidunt erat congue rhoncus.  
  </div> 
</div>

UPD для такого не нужны data атрибуты. UPD 2 при клике на открытый блок, он закроется

READ ALSO
Корректный запуск программы

Корректный запуск программы

Подскажите пожалуйста, как исправить следующую ситуацию: когда я запускаю программу (форму1), на которой расположено около 50 различных контролов...

177
C# OpenFileDialog и SaveFileDialog не открывается

C# OpenFileDialog и SaveFileDialog не открывается

Не могу понять, на Window 7 диалоговое окно выбора фала для загрузки, или аналогичное окно выбора файла для сохранения, открывается нормальноНа...

237
Зачем нужно использовать mock объекты?

Зачем нужно использовать mock объекты?

Говорится что эта технология позволяет имитировать объектЗачем это надо если этот объект можно просто создать?

187
Использование проверки данных в ControlTemplate

Использование проверки данных в ControlTemplate

Пытаюсь сформировать проверку данных в WpfПримеры из нета работают

197