Question

我正在尝试切换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>

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

Answer 1

我无法重现您提及的slideToggle is not a function错误。

但是你的代码不起作用，因为这行不正确：

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

ul元素是兄弟，而不是span.children元素的子元素。将其更改为以下内容可解决此问题：

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

＆＃13;

$(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();
    });
});

＆＃13;

<!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>

＆＃13;

slideToggle不是一个函数

1 个答案: