javascript - SlideToggle 不是函数

标签 javascript jquery html

我试图切换 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.log($(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>

基本上,当用户单击>时,应该显示子菜单。

最佳答案

我无法重现您提到的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.log($(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>

关于javascript - SlideToggle 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50222929/

相关文章:

javascript - Jquery/CSS 动画性能

javascript - jQuery 选择器适用于 Javascript 代码之后出现的选择器吗?

c# - 下载带有响应的文件不显示文件大小

Javascript - 运行时优先级和队列

asp.net - 确定 ASP.NET 客户端 ID

javascript - 使用javascript交换行

javascript - 计算上传速度

javascript - 即使使用 off 后 div 也会触发 click 事件

javascript - 粘性导航栏需要占用空间

html - 在 css 中将 <div> 包装在文本中间