アコーディオン作成で、slideUp slideDownメソッドが上手く機能しない。

前提・実現したいこと

閲覧くださり、ありがとうございます。
簡単なアコーディオンの作成をしております。

下記のソースコードのように記述しておりますが、
slideUp と slideDown が上手く機能しておりません。

思考錯誤しましたが、原因が分からないため質問させていただきました。
お忙しい所大変恐縮ですが、ご回答いただけますと幸いです。
よろしくお願いいたします。

該当のソースコード

####HTML

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

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

    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/custom_reset.css">
    <link rel="stylesheet" href="./css/style.css">
    <script src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
</head>

<body>
    <div>
        <p><span>+</span>メニュー</p>
        <ul>
            <li>ホーム</li>
            <li>ホーム</li>
            <li>ホーム</li>
        </ul>
    </div>
    <script src="./js/script.js"></script>
</body>

</html>

####CSS


div {
    cursor: pointer;
    display: block;
}
ul {
    display: none;
}
.open {
    display: block;
}

JQuery

$(function () { 

    $('div').click(function () {
        var $ul = $(this).find('ul');
        
        if ($ul.hasClass('open')) {
            $ul.removeClass('open');
            $ul.slideUp();
            $('span').text('+');
        } else {
            $ul.addClass('open');
            $ul.slideDown();
            $('span').text('-');  
        }
    }); 
});

補足情報（FW/ツールのバージョンなど）

VSCode
Windows 7

行動規範の内容に同意します

回答1件

ベストアンサー

動くサンプル：https://jsfiddle.net/7n3eyx2z/

メニューの開閉なら上記サンプル通り出来ているので、「上手く機能しておりません」が「スライドしない」という意味なら、スライドさせましょう。

js
1$(function () { 
2    $('div').click(function () {
3        var $ul = $(this).find('ul');
4        $ul.slideToggle();
5    }); 
6});
7```**動くサンプル：**[https://jsfiddle.net/7n3eyx2z/1/](https://jsfiddle.net/7n3eyx2z/1/)
8
9---
10
11【.slideToggle() | jQuery API Documentation】
12[https://api.jquery.com/slidetoggle/](https://api.jquery.com/slidetoggle/)
13
14---
15
16**追記：**
17
18「スライドしない」を勘違いしていました。
19```js
20$(function () { 
21
22    $('div').click(function () {
23        var $ul = $(this).find('ul');
24
25        if ($ul.hasClass('open')) {
26            $ul.removeClass('open');
27            $ul.slideUp();
28            $('span').text('+');
29        } else {
30            $ul.slideDown(); // 先にこちらをしないと、slideDownする前にopenしてしまう
31            $ul.addClass('open');
32            $('span').text('-');  
33        }
34    }); 
35});
36```**動くサンプル：**[https://jsfiddle.net/fzaspcmj/](https://jsfiddle.net/fzaspcmj/)