jqueryを用いたトグルボタン

jQueryを用いて、ボタンを押すと上からメニューが降りてくるような
トグルボタンを作成しています。

何度試しても、プレビューでメニューを押すと、
メニューが降りてくるのではなく、
プレビューの HTMLの画面(白黒でコード表示)が
表示されてしまいます。

何度試してみても変わらずで
何か悪い点があれば教えて頂きたいです。お願いいたします。

html
1
2<!DOCTYPE html>
3<html>
4  <head>
5    <meta charset="utf-8">
6    <title>stuffed-animal</title>
7    <link rel="stylesheet" href="style-contact.css">
8  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
9
10
11  </head>
12
13<header>
14<div class="header-wrapper">
15  <div class="header-bk">
16    <img src="img/logo-header (2).png">
17    <a id="down-menu" href="#"><img src="img/menu-sp-btn-copyーcopy.png"></a>
18    <ul id="menu-list">
19<li>HOME</li>
20<li>サービスコンセプト</li>
21<li>アイテム一覧</li>
22<li>ご利用ガイド</li>
23<li>お客様の声</li>
24<li>よくあるご質問</li>
25<li>お問い合わせ</li>
26<li>その他</li>
27    </ul>
28
29  </div>
30</div>
31</header>
32
33
34

jquery
1$(function(){
2
3$("#down-menu").on("click", function(){
4  $("#menu-list").slideToggle();
5  $("#menu-list").toggleClass("active");
6});
7
8});
9

退会済みユーザー

2020/05/09 13:03

現象を再現するために必要最低限の情報を提示してください。

omori3

2020/05/09 13:12

style-contact.css もみたいです！

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

回答1件

こんにちは、以下のHTMLのコードで出来ると思われますがどうでしょうか。

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8" />
5        <title>stuffed-animal</title>
6        <link rel="stylesheet" href="style-contact.css" />
7        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
8        <script>
9            $(function () {
10                $("#down-menu").on("click", function () {
11                    $("#menu-list").slideToggle();
12                    $("#menu-list").toggleClass("active");
13                });
14            });
15        </script>
16    </head>
17
18    <header>
19        <div class="header-wrapper">
20            <div class="header-bk">
21                <img src="img/logo-header (2).png" />
22                <a id="down-menu" href="#"><img src="img/menu-sp-btn-copyーcopy.png" /></a>
23                <ul id="menu-list">
24                    <li>HOME</li>
25                    <li>サービスコンセプト</li>
26                    <li>アイテム一覧</li>
27                    <li>ご利用ガイド</li>
28                    <li>お客様の声</li>
29                    <li>よくあるご質問</li>
30                    <li>お問い合わせ</li>
31                    <li>その他</li>
32                </ul>
33            </div>
34        </div>
35    </header>
36</html>
37