jQuery slideToggle不起作用，使用顯示：無

Question

在以下示例中，我嘗試在內部內容窗格div上使用jQuery #slideToggle打開一個下拉菜單。 使用Firefox，滑動對我完全沒有反應。

我嘗試僅將響應部分復制到輔助文件，但沒有成功。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .drawer {
            width: 100px;
            justify-content: center;
            background: #00274f;
            border: 1px solid #001937;
            border-radius: 20px;
            padding: 10px;
        }

        .drawer-head {
            justify-content: center;
            background: #00274f;
            border: 1px solid #001937;
            border-radius: 20px;
            padding: 10px;
            cursor: pointer;
        }

        .drawer-content {
            display: none;
            width: 99px;
            justify-content: center;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="drawer" id="drawer-projects">
    <div class="drawer-head" onclick="$('drawer-content-projects').slideToggle('slow');">Projects</div>
    <div class="drawer-content" id="drawer-content-projects">
        <img class="icon" src="img/socialmedia/github.png" alt="GitHub"
             title="GitHub" onclick="select('github')">
        <!-- code was cut from the main site -->
    </div>
</div>
</body>
</html>

給定的代碼應打開一個帶有GitHub圖標onclick的子菜單。 子菜單實際上已正確布置。

Answer 1

在下面的代碼行中， drawer-content-projects是一個id

更改

<div class="drawer-head" onclick="$('drawer-content-projects').slideToggle('slow');">Projects</div>

至

<div class="drawer-head" onclick="$('#drawer-content-projects').slideToggle('slow');">Projects</div>

.drawer {
    width: 100px;
    justify-content: center;
    background: #00274f;
    border: 1px solid #001937;
    border-radius: 20px;
    padding: 10px;
}

.drawer-head {
    justify-content: center;
    background: #00274f;
    border: 1px solid #001937;
    border-radius: 20px;
    padding: 10px;
    cursor: pointer;
}

.drawer-content {
    display: none;
    width: 99px;
    justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="drawer" id="drawer-projects">
    <div class="drawer-head" onclick="$('#drawer-content-projects').slideToggle('slow');">Projects</div>
    <div class="drawer-content" id="drawer-content-projects">
        <img class="icon" src="img/socialmedia/github.png" alt="GitHub"
             title="GitHub" onclick="select('github')">
        <!-- code was cut from the main site -->
    </div>
</div>

jQuery slideToggle不起作用，使用顯示：無

問題描述

1 個解決方案

解決方案1
1 已采納 2019-03-25 18:28:30

jQuery slideToggle不起作用，使用顯示：無

問題描述

1 個解決方案

解決方案1 1 已采納 2019-03-25 18:28:30

解決方案1
1 已采納 2019-03-25 18:28:30