2

Как сделать так, чтобы спойлер открывался или закрывался только по нажатию на кнопку Spoiler? Сейчас спойлер можно закрыть, если кликнуть на пустое пространство или на текст в спойлере. Как исправить это?

https://jsfiddle.net/xrgacL6w

<div class="spoiler">
    <label>
      <input type="checkbox" />
      <span class="btn">Spoiler</span>
      <div class="text">
        text<br>  
      </div>
    </label>
</div>

3 ответа 3

3

Предлагаю использовать html тег <details>, так мы уменьшим код и pointer-events не нужен.

<details>
    <summary>Spoiler</summary>
    <span class="text">Скрытый текст!</span>
</details>
summary {
    list-style-type: none;
    display: inline-block;
    border: none;
    border-radius: 4px;
    font-size: 22px;
    padding: 10px 20px;
    background: #558ed6;
    color: #fff;
    font-family: Tahoma, sans-serif;
    cursor: pointer;
  
}

.text {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 12px 0 20px;
    display: block;
}

1

В вашем примере можно ограничить область действия клика при помощи свойства pointer-events:

.spoiler {
    pointer-events:none;
}
.btn {
    pointer-events:auto;
}

.spoiler {
  display: block;
  pointer-events: none;
}

.btn {
  display: inline-block;
  border: none;
  border-radius: 4px;
  font-size: 22px;
  padding: 10px 20px;
  background: #558ed6;
  color: #fff;
  font-family: Tahoma, sans-serif;
  cursor: pointer;
  pointer-events: auto;
}

.spoiler input[type=checkbox] {
  display: none;
}

.text {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 12px 0 20px;
}

.spoiler input[type=checkbox]~.text {
  display: none;
}

.spoiler input[type=checkbox]:checked~.text {
  display: block;
}

.spoiler input[type=checkbox]:after~.text {
  display: block;
}
<div class="spoiler">
  <label>
      <input type="checkbox" />
      <span class="btn">Spoiler</span>
      <div class="text">
        text<br>  
      </div>
    </label>
</div>

0
document.querySelector(".btn").onclick = function(){
    if (document.querySelector(".text").style.display == "none"){
        document.querySelector(".text").style.display = "block";
    }
    else{
        document.querySelector(".text").style.display = "none";
    }
};

https://jsfiddle.net/b3svL6cj/15/

Краткий вариант с использованием JS, в этом варианте не надо ничего крутить в стилях не надо.

Обязательно зайдите на jsfiddle, там изменён и css и html.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.