Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.12.2018, 14:08
Интересующийся
Отправить личное сообщение для windcrack Посмотреть профиль Найти все сообщения от windcrack
 
Регистрация: 03.02.2018
Сообщений: 13

Доработать скрипт
Опыт в разработке мал скажем так только 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);
					}
				}
			}
)};

ЗЫ ну то есть на самого себя.

Последний раз редактировалось windcrack, 24.12.2018 в 14:18.
Ответить с цитированием
  #2 (permalink)  
Старый 24.12.2018, 14:28
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

Ваш скрипт через чур много действий производит.
Можете верстку показать?
Ответить с цитированием
  #3 (permalink)  
Старый 24.12.2018, 14:55
Интересующийся
Отправить личное сообщение для windcrack Посмотреть профиль Найти все сообщения от windcrack
 
Регистрация: 03.02.2018
Сообщений: 13

Сообщение от Nexus Посмотреть сообщение
Ваш скрипт через чур много действий производит.
Можете верстку показать?
<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>
Ответить с цитированием
  #4 (permalink)  
Старый 24.12.2018, 16:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

windcrack,
400 вариантов того что вам нужно
форум поиск открывашка
Ответить с цитированием
  #5 (permalink)  
Старый 24.12.2018, 16:33
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

<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>
Ответить с цитированием
  #6 (permalink)  
Старый 24.12.2018, 16:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

открывашка зависимая 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите доработать скрипт с редиректом Константин2211 Элементы интерфейса 6 26.02.2017 17:44
Помогите доработать скрипт mal4ishok Общие вопросы Javascript 2 20.10.2016 15:34
select - тег помогите доработать скрипт пожалуйста Svetik-top Элементы интерфейса 3 25.03.2015 18:12
Доработать скрипт volvon Работа 5 10.12.2010 20:27
добавление окошка в скрипт подсчета слов Гость Общие вопросы Javascript 10 11.03.2008 17:07