Свернуть лоток, когда другой лоток расширяется с помощью jquery

Мне нужно свернуть все остальные лотки, когда текущий лоток будет расширен, и предупредить пользователя о имени класса (независимо от того, расширен ли контент2, контент1, контент2 в настоящее время и активен, когда все закрыты, возвращается ноль) расширенного лотка для пользователя. Все они должны быть закрыты при загрузке. Я не понимаю, как это сделать.

я пробовал с

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
</style>
</head>
<body>
<button type = "button" class = "collapsible">Open Section 1</button>
<div class = "content0">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button type = "button" class = "collapsible">Open Section 2</button>
<div class = "content1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button type = "button" class = "collapsible">Open Section 3</button>
<div class = "content2">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button onlcick = "alert('active tray is ')">Press me</button>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>

</body>
</html>

ваш текущий код в js? вы открыты с jquery?

— 14.12.2020 05:25

Да, я ищу jquery.

— 14.12.2020 05:26

Сделайте это фрагментом на SO.

— 14.12.2020 05:34

javascript html jquery

14.12.2020 05:13

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Сначала спрячьте все div, используя подстановочный знак. При нажатии на кнопку покажите свой div с помощью next, как показано ниже.

$("[class^=content]").hide();
$('.collapsible').click(function(e) {
  $("[class^=content]").hide();
  $(this).next('div').show();
});

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,
.collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type = "button" class = "collapsible">Open Section 1</button>
<div class = "content0">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button type = "button" class = "collapsible">Open Section 2</button>
<div class = "content1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button type = "button" class = "collapsible">Open Section 3</button>
<div class = "content2">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Но мне нужно предупредить имя класса активного открытого div..<button onclick = "alert('active Tray is ')"></button>

— 14.12.2020 05:38

Я имею в виду, когда нажимается другая кнопка ниже. Я обновил код, чтобы иметь кнопку

— 14.12.2020 05:41

14.12.2020 05:34

Ответ принят как подходящий

Вы можете проверить, имеет ли кнопка, которая нажимается, класс active или нет, в зависимости от этого скрыть или показать div и распечатать результат, т.е.: классы или ноль.

Демонстрационный код:

$("div[class*=content]").toggle()
$(".collapsible").click(function() {
  //remove active from other collaps.. button
  $(".collapsible").not(this).removeClass("active")
  //check if the button which is click have class active
  if ($(this).hasClass("active")) {
    $(this).removeClass("active") //remove active class
    console.info("Null...") //means no one is slected
  } else {
    $(this).addClass("active") //add class active
    $(".collapsible").not(this).next("div").hide() //hide next div from others
    console.info("Current Active " + $(this).next("div").attr("class"))
  }
  $(this).next("div").toggle() //show div or hide
})

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,
.collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

style>.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,
.collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<button type = "button" class = "collapsible">Open Section 1</button>
<div class = "content0">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button type = "button" class = "collapsible">Open Section 2</button>
<div class = "content1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button type = "button" class = "collapsible">Open Section 3</button>
<div class = "content2">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

14.12.2020 05:45

попробуйте это, я внес небольшие изменения в ваш код

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
</style>
</head>
<body>
<button type = "button" class = "collapsible" id = "sec1">Open Section 1</button>
<div class = "content" id = "content1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button type = "button" class = "collapsible" id = "sec2">Open Section 2</button>
<div class = "content" id = "content2">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button type = "button" class = "collapsible" id = "sec3">Open Section 3</button>
<div class = "content" id = "content3">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    let id=this.id;
    let allContents = document.getElementsByClassName("content");
  
    let l = allContents.length;
    for (i = 0; i < l; i++) {
          if (allContents[i].previousElementSibling.id!==id){
            allContents[i].style.display = "none";
          }
    }
 
    var content = this.nextElementSibling;
     alert(""+content.id)
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>

</body>
</html>

14.12.2020 07:57

Другие вопросы по теме

Max функция CSS с процентным аргументом не работает с элементом th

Влияние CSS display:none на DOM

Как я могу активировать значок, используя идентификатор, а не класс, и как я могу автоматически удалять и добавлять его?

Sass анимационные миксины с использованием include

Chrome на iPhone переполняет контент на пустой странице (только на новой вкладке, без перезагрузки)

Как отслеживать идентификаторы строк таблиц, созданных путем установки флажка, когда они могут быть удалены случайным образом

Как использовать путь svg в качестве фавикона

Проблема с заглавными буквами в текстовом поле

Display: flex & justify-content: space-evenly

Как потоковые сайты отображают информацию о видео в браузере

Свернуть лоток, когда другой лоток расширяется с помощью jquery

Ответы 3

Другие вопросы по теме

Похожие вопросы