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 个答案: