Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 20.02.2023, 21:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,127

Сергей Ракипов,
потому что в строке 48 ошибка, строка 51 не может работать со строкой 48.
Ответить с цитированием
  #12 (permalink)  
Старый 20.02.2023, 21:25
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,750

Что у вас будет в coll?

Такое
content.style.maxHeight = null;
тоже нельзя. Свойство стиля - это строка. Если надо удалить, то ставят пустую строку.

Последний раз редактировалось voraa, 20.02.2023 в 21:28.
Ответить с цитированием
  #13 (permalink)  
Старый 21.02.2023, 07:34
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 668

рони,
Я запустил цикл for потому что должно было быть несколько блоков
И вот все исправил спасибо.
по нулл понял, но если често оно и с нул работает и с пустой строкой.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <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;
            max-height: 0px;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
            background-color: #f1f1f1;
        }

    </style>
</head>

<body>

    <button class="collapsible">Open Collapsible</button>
    <div class="content">
        Лишь явные признаки победы институционализации неоднозначны и будут смешаны с не уникальными данными до степени совершенной неузнаваемости, из-за чего возрастает их статус бесполезности. В своём стремлении повысить
        качество жизни, они забывают, что экономическая повестка сегодняшнего дня обеспечивает широкому кругу (специалистов) участие в формировании инновационных методов управления процессами. Сложно сказать, почему многие известные личности будут
        объявлены нарушающими общечеловеческие нормы этики и морали.
    </div>
    <button class="collapsible">Open Collapsible</button>
    <div class="content">
        Лишь явные признаки победы институционализации неоднозначны и будут смешаны с не уникальными данными до степени совершенной неузнаваемости, из-за чего возрастает их статус бесполезности. В своём стремлении повысить
        качество жизни, они забывают, что экономическая повестка сегодняшнего дня обеспечивает широкому кругу (специалистов) участие в формировании инновационных методов управления процессами. Сложно сказать, почему многие известные личности будут
        объявлены нарушающими общечеловеческие нормы этики и морали.
    </div>

    <script>
        let coll = document.querySelectorAll(".collapsible");
        // let content = document.querySelector(".content");

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

</body>
</html>
Ответить с цитированием
  #14 (permalink)  
Старый 21.02.2023, 13:41
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 668

А какая здесь ошибка

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>

        .collapse__content{
            display: none;
        }
        .collapse__content_open{
            display: block;
        }

    </style>
</head>

<body>
    <div class="collapse">
        <div class="collapse__hitarea">Toggle</div>
        <div class="collapse__content">Text</div>
    </div>

    <div class="collapse">
        <div class="collapse__hitarea">Toggle</div>
        <div class="collapse__content">Text</div>
    </div>

<script>



    const hitarea = document.querySelectorAll('.collapse__hitarea')
    const content = document.querySelectorAll('.collapse__content')


    const createCollapse = (hitarea, content) => {

        hitarea.addEventListener('click', () => {
            content.classList.toggle('collapse__content_open')
        })
    }

    const collapse = document.querySelectorAll('.collapse');
    collapse.forEach(createCollapse);

</script>


</body>

</html>
Ответить с цитированием
  #15 (permalink)  
Старый 21.02.2023, 14:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,127

Сергей Ракипов,
надо запомнить что свойства элемента, отличаются от свойств списка элементов.
ваш код, это фантазия на тему, а не использование js.
Ответить с цитированием
  #16 (permalink)  
Старый 21.02.2023, 14:03
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 668

рони,
То есть вот эта запись

content.classList.toggle('collapse__content_open')

она не пойдет? если да то какое тогда свойства брать?
Ответить с цитированием
  #17 (permalink)  
Старый 21.02.2023, 14:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,127

Сергей Ракипов,
<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .collapse__content {
            display: none;
        }

        .collapse__content_open {
            display: block;
        }
    </style>
</head>

<body>
    <div class="collapse">
        <div class="collapse__hitarea">Toggle</div>
        <div class="collapse__content">Text</div>
    </div>
    <div class="collapse">
        <div class="collapse__hitarea">Toggle</div>
        <div class="collapse__content">Text</div>
    </div>
    <script>
        const hitarea = document.querySelectorAll('.collapse__hitarea');
        const content = document.querySelectorAll('.collapse__content');


        const createCollapse = (button, i) => {

            button.addEventListener('click', () => {
                content[i].classList.toggle('collapse__content_open')
            })
        }

        hitarea.forEach(createCollapse);
    </script>
</body>

</html>
Ответить с цитированием
  #18 (permalink)  
Старый 21.02.2023, 14:45
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 668

рони,
Правильно ли я понял что
button это элемент <div class="collapse__hitarea">Toggle</div> а i это индекс.
и эмент "услышал" клик запустил функцию где <div class="collapse__content">Text</div> с индексом i убрал или добавил класс.

Но я не могу понять как i понял что он нулевой или первый
Ответить с цитированием
  #19 (permalink)  
Старый 21.02.2023, 14:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,127

Сергей Ракипов,
foreach
Ответить с цитированием
  #20 (permalink)  
Старый 21.02.2023, 15:15
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 668

рони,
я читал это там не написано это вот почему я кликнул на вторую кнопку а а он открыл первый блок, вот что ему сказало что при клике на первую втору кнопку он должен открыть элемент под индексом 1 а не к примеру 0
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Работа скрипта в на конкретном блоке BigNewGod jQuery 4 30.08.2017 15:03
Сложная работа Тыжпрограммиста myxosran jQuery 7 04.04.2017 14:16
Вакансия: Программист IOS, работа в офисе,г.Ростов-на-Дону Анна NikitaOnline Работа 0 21.03.2016 18:45