SlideToggle - это не функция

Я пытаюсь переключить ul, но получаю сообщение об ошибке «slideToggle не является функцией». Меню используется для переключения списка.

    $(function() {
        $("li ul").hide();

        var currentChildLevel;
        var previousLevel;
        var isAChild; //means it belongs to parent li

        $("li ul").hide();
        $("li > a + ul").prev("a").after('<span class = "children"> > </span>');

        $("li a").click(function () {
            console.info($(this).text());
        });


        $("span.children").click(function() {
            $(this).find('ul').first().slideToggle();
        });


    });

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang = "en" xmlns = "http://www.w3.org/1999/xhtml">
<head>
    <meta charset = "utf-8" />
</head>
<body>

<ul>
    <li><a href = "#">Coffee</a></li>
    <li><a href = "#">Tea</a>
        <ul>
            <li><a href = "#">Black tea</a></li>
            <li><a href = "#">Green tea</a>
                <ul class = "test">
                    <li><a href = "#">Black b</a></li>
                    <li><a href = "#">Black c</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href = "#">Milk</a></li>
</ul>

</body>
</html>

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

Поменять ли $(function() на $(function($) проблему? Если это так, значит, что-то еще добавляет другую версию jquery, которая не включает метод slideToggle.

— 07.05.2018 23:56

похоже, вы не предоставили html-коды для $("span.children") или, возможно, вы использовали неправильный селектор, который не привел к совпадению.

— 08.05.2018 00:04

javascript jquery html

07.05.2018 23:48

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

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

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

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

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

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

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

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

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

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

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

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

491

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

Ответы 1

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

Я не могу воспроизвести указанную вами ошибку slideToggle is not a function.

Однако ваш код не будет работать, потому что эта строка неверна:

$(this).find('ul').first().slideToggle();

Элемент ul является родственным, а не дочерним элементом элемента span.children. Изменение его на следующее решает проблему:

$(this).siblings('ul').first().slideToggle();

$(function() {
    $("li ul").hide();

    var currentChildLevel;
    var previousLevel;
    var isAChild; //means it belongs to parent li

    $("li ul").hide();
    $("li > a + ul").prev("a").after('<span class = "children"> &gt; </span>');

    $("li a").on('click', function () {
      console.info($(this).text());
    });


    $("span.children").on('click', function() {
      $(this).siblings('ul').first().slideToggle();
    });
});

<!DOCTYPE html>
<html lang = "en" xmlns = "http://www.w3.org/1999/xhtml">
  <head>
      <meta charset = "utf-8" />
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
    <ul>
        <li><a href = "#">Coffee</a></li>
        <li><a href = "#">Tea</a>
            <ul>
                <li><a href = "#">Black tea</a></li>
                <li><a href = "#">Green tea</a>
                    <ul class = "test">
                        <li><a href = "#">Black b</a></li>
                        <li><a href = "#">Black c</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href = "#">Milk</a></li>
    </ul>
  </body>
</html>

08.05.2018 00:12

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

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

Если текстовое значение элемента существует в JSON, сделайте это

Ошибка: не удается прочитать свойство "верх" из неопределенного

Как получить значение функции onchange и передать это значение функции onClick после нажатия кнопки с помощью javascript

Медиа-запрос с использованием Javascript / JQuery - изменение изображения в зависимости от размера экрана

Перечислить общие справочные теги HTML в одном файле

Привязка данных сообщения jquery к типу с #

Строковый фильтр и контрольный фильтр данных более чем одной диаграммы Google

Получить атрибуты отправки ссылки в JQuery

Get не определен в javascript-подозреваемой проблеме с jquery

SlideToggle - это не функция

Ответы 1

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

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