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

212

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 при клике на открытый блок, он закроется

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

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

221

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

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

274

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

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

230

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

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

239