简单jQuery折叠

aurhwmvo  于 2023-01-30  发布在  jQuery
关注(0)|答案(1)|浏览(143)

我试着写简单的 accordion ,我不知道我错过了什么。aquashow需要隐藏时,页面加载,当用户点击按钮,它需要显示/隐藏

var $ = jQuery.noConflict();
    
$(function() {
    $('#aquashow').hide();

    $("#aqua").click(function(e) {
        $("#aquashow").toggle();
        e.preventDefault();
    });
});
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
        <script src="script.js"></script>
    </head>
    <body>
        <p>
            <a href="#" class="button button__secondary icon-collapse" id="aqua">Aquatics</a>
        </p>
        <div id="aquashow">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis omnis qui quidem repudiandae illum, aut delectus quas. Minus quibusdam asperiores sed est voluptatibus natus, sint aliquam voluptate amet? Neque, esse!</p>
            <ul>
                <li>Test 1</li>
                <li>Test 2</li>
                <li>Test 3</li>
            </ul>
        </div>
    </body>
</html>
anauzrmj

anauzrmj1#

它似乎工作根据@大卫的链接,但不在我的电脑上。
我已经用@Ali提到的slideToggle()重新做了代码,它开始工作了。我不知道为什么以前的那个不工作。但是谢谢你的反馈。

相关问题