Доработать скрипт
Опыт в разработке мал скажем так только 1месяц с половиной. Нужна помощь опытных. Сейчас данный скрипт при клике на detailed показывает то что спрятано в more-opt. А когда кликаешь на соседний detailed он скрывает 1 more-opt что открыт и показывает more-opt соседла. Как сделать что бы данный скрит при клике на detailed тоже закрывал more-opt не нажимая на соседа.
let more = document.querySelectorAll('.more-opt'),
body = document.querySelector('body'),
des = document.querySelectorAll('.description'),
details = document.querySelectorAll('.detailed');
function hideMore(h){
for(let i = h; i < more.length; i++){
more[i].classList.remove('show');
des[i].classList.remove('hide');
more[i].classList.add('hide');
des[i].classList.add('show');
}
}
hideMore(0);
function showMore(s){
if (more[s].classList.contains('hide')) {
more[s].classList.remove('hide');
more[s].classList.add('show');
des[s].classList.add('hide');
}
}
body.addEventListener('click', e =>{
let target = e.target;
if (target && target.classList.contains('detailed')) {
for(let i = 0; i < details.length; i++){
if (target == details[i]) {
hideMore(0);
showMore(i);
}
}
}
)};
ЗЫ ну то есть на самого себя. |
Ваш скрипт через чур много действий производит.
Можете верстку показать? |
Цитата:
<div class="col-lg-3 col-md-4 col-12" style="justify-content: stretch; display: flex;"> <div class="row m-0"> <div class="col-md-12 col-5 p-0"> <img class="product-img" src="img/towar1.png" alt="Суши"> </div> <div class="col-md-12 col-7 p-0"> <!-- <div class="product-details"> --> <div class="d-flex justify-content-between"> <h2 class="product-title">Авокадо2</h2> <img class="detailed" src="img/q.svg" alt="Вопросик"> </div> <div class="description block-on-js show-t"> <p class="product-description">Классический японский ролл со свежим авокадо и кунжутом Классический японский ролл со свежим авокадо и кунжутом</p> </div> <div class="more-opt product-description"> <p>Калории: 180</p> <p>Состав: Рис, нори, авокадо.</p> </div> <div> <p class="pt-lg-3 product-price-block"> <span class=""> <span class="weight">1500 г.</span> <span class="price">1200 р.</span> </span> <span> <a href="#" class="badge badge-warning cart-btn">В корзину</a> </span> </p> </div> <!-- </div> --> </div> </div> </div> <div class="col-lg-3 col-md-4 col-12"> <div class="row m-0"> <div class="col-md-12 col-5 p-0"> <img class="product-img" src="img/towar1.png" alt="Суши"> </div> <div class="col-md-12 col-7 p-0"> <div class="product-details"> <div class="d-flex justify-content-between"> <h2 class="product-title">Авокадо</h2> <img class="detailed" src="img/q.svg" alt="Вопросик"> </div> <div class=""> <div class="description block-on-js"> <p class="product-description">Классический японский ролл со свежим авокадо и кунжутом Классический японский ролл со свежим авокадо и кунжутомКлассический японский ролл со свежим авокадо и кунжутом Классический японский ролл со свежим авокадо и кунжутом</p> </div> <div class="more-opt product-description"> <p>Калории: 180</p> <p>Состав: Рис, нори, авокадо.</p> </div> <p class="pt-3 product-price-block"> <span class=""> <span class="weight">1500 г.</span> <span class="price">1200р.</span> </span> <span> <a href="#" class="badge badge-warning cart-btn">В корзину</a> </span> </p> </div> </div> </div> </div> </div> |
windcrack,
400 вариантов того что вам нужно форум поиск открывашка |
<div class="col-lg-3 col-md-4 col-12" style="justify-content: stretch; display: flex;">
<div class="row m-0">
<div class="col-md-12 col-5 p-0">
<img class="product-img" src="img/towar1.png" alt="Суши">
</div>
<div class="col-md-12 col-7 p-0">
<div class="product-details">
<div class="d-flex justify-content-between">
<h2 class="product-title">Авокадо2</h2>
<img class="detailed" src="img/q.svg" alt="Вопросик">
</div>
<div class="description block-on-js show-t">
<p class="product-description">Классический японский ролл со свежим авокадо и кунжутом Классический японский ролл со свежим авокадо и кунжутом</p>
</div>
<div class="more-opt product-description">
<p>Калории: 180</p>
<p>Состав: Рис, нори, авокадо.</p>
</div>
<div>
<p class="pt-lg-3 product-price-block">
<span class="">
<span class="weight">1500 г.</span>
<span class="price">1200 р.</span>
</span>
<span>
<a href="#" class="badge badge-warning cart-btn">В корзину</a>
</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-12">
<div class="row m-0">
<div class="col-md-12 col-5 p-0">
<img class="product-img" src="img/towar1.png" alt="Суши">
</div>
<div class="col-md-12 col-7 p-0">
<div class="product-details">
<div class="d-flex justify-content-between">
<h2 class="product-title">Авокадо</h2>
<img class="detailed" src="img/q.svg" alt="Вопросик">
</div>
<div class="">
<div class="description block-on-js">
<p class="product-description">Классический японский ролл со свежим авокадо и кунжутом Классический японский ролл со свежим авокадо и кунжутомКлассический японский ролл со свежим авокадо и кунжутом Классический японский ролл со свежим авокадо и кунжутом</p>
</div>
<div class="more-opt product-description">
<p>Калории: 180</p>
<p>Состав: Рис, нори, авокадо.</p>
</div>
<p class="pt-3 product-price-block">
<span class="">
<span class="weight">1500 г.</span>
<span class="price">1200р.</span>
</span>
<span>
<a href="#" class="badge badge-warning cart-btn">В корзину</a>
</span>
</p>
</div>
</div>
</div>
</div>
</div>
<style>.more-opt{display:none}</style>
<script>
const items = document.querySelectorAll('.product-details');
let activeElement;
const toggle = function(showOptions) {
this.querySelectorAll('.more-opt,.description').forEach(function(node) {
node.style.display = showOptions !== node.classList.contains('description') ? 'block' : 'none';
});
};
items.forEach(function(item) {
item.querySelector('.detailed').addEventListener('click', function() {
const isActive = activeElement === item;
if (!isActive && activeElement)
toggle.call(activeElement, false);
activeElement = isActive ? undefined : item;
toggle.call(item, !isActive);
});
});
</script>
|
открывашка зависимая js делегрование
windcrack,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.more-opt{
display: none;
}
.more-opt.show{
display: block;
}
.description.hide{
display: none;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var more = document.querySelectorAll(".more-opt"),
body = document.querySelector("body"),
des = document.querySelectorAll(".description"),
details = document.querySelectorAll(".detailed"),
index = 0;
more[index].classList.add("show");
des[index].classList.add("hide");
body.addEventListener("click", function(e) {
var target = e.target;
if (target && target.classList.contains("detailed")) {
var i = [].indexOf.call(details, target);
if (i == index) {
more[index].classList.toggle("show");
des[index].classList.toggle("hide");
}
else {
more[index].classList.remove("show");
des[index].classList.remove("hide");
index = i;
more[index].classList.add("show");
des[index].classList.add("hide");
}
}
})
});
</script>
</head>
<body>
<div class="col-lg-3 col-md-4 col-12" style="justify-content: stretch; display: flex;">
<div class="row m-0">
<div class="col-md-12 col-5 p-0">
<img class="product-img" src="img/towar1.png" alt="Суши">
</div>
<div class="col-md-12 col-7 p-0">
<!-- <div class="product-details"> -->
<div class="d-flex justify-content-between">
<h2 class="product-title">Авокадо2</h2>
<img class="detailed" src="img/q.svg" alt="Вопросик">
</div>
<div class="description block-on-js show-t">
<p class="product-description">Классический японский ролл со свежим авокадо и кунжутом Классический японский ролл со свежим авокадо и кунжутом</p>
</div>
<div class="more-opt product-description">
<p>Калории: 180</p>
<p>Состав: Рис, нори, авокадо.</p>
</div>
<div>
<p class="pt-lg-3 product-price-block">
<span class="">
<span class="weight">1500 г.</span>
<span class="price">1200 р.</span>
</span>
<span>
<a href="#" class="badge badge-warning cart-btn">В корзину</a>
</span>
</p>
</div>
<!-- </div> -->
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-12">
<div class="row m-0">
<div class="col-md-12 col-5 p-0">
<img class="product-img" src="img/towar1.png" alt="Суши">
</div>
<div class="col-md-12 col-7 p-0">
<div class="product-details">
<div class="d-flex justify-content-between">
<h2 class="product-title">Авокадо</h2>
<img class="detailed" src="img/q.svg" alt="Вопросик">
</div>
<div class="">
<div class="description block-on-js">
<p class="product-description">Классический японский ролл со свежим авокадо и кунжутом Классический японский ролл со свежим авокадо и кунжутомКлассический японский ролл со свежим авокадо и кунжутом Классический японский ролл со свежим авокадо и кунжутом</p>
</div>
<div class="more-opt product-description">
<p>Калории: 180</p>
<p>Состав: Рис, нори, авокадо.</p>
</div>
<p class="pt-3 product-price-block">
<span class="">
<span class="weight">1500 г.</span>
<span class="price">1200р.</span>
</span>
<span>
<a href="#" class="badge badge-warning cart-btn">В корзину</a>
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 15:04. |