我试图切换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/

10-13 01:30