手风琴菜单一直打开直到关闭

Accordion menu stay open until it closed

本文关键字：菜单 一直 手风琴      更新时间：2023-09-26

默认情况下，我有手风琴菜单开关，当页面加载时关闭，用户必须单击菜单才能打开它。我如何使页面加载时打开并始终保持打开状态，当单击时关闭？这是js

(function (window, $) {
'use strict';
// Cache document for fast access.
var document = window.document;
/************** Toggle Menu *********************/
$('a.toggle-menu').click(function(){
    $(".menu").slideToggle(400);
    return false;
});
/************** Open Different Pages *********************/
$(".menu a").click(function(){
    var id =  $(this).attr('class');
    id = id.split('-');
    $("#menu-container .content").hide();
    $("#menu-container #menu-"+id[1]).addClass("animated fadeInDown").show();
    return false;
});
$(".menu a.homebutton").click(function(){
    $(".menu").slideUp();
});
$(window).resize(function(){
    if ($(window).width() <= 769){  
        $(".menu a").click(function(){
            $(".menu").hide();
            return false;
        });
    }   
});
})(window, jQuery);

这是html for it

<div class="menu-wrapper">
     <ul class="menu">
           <li><a class="homebutton" href="#">Home</a></li>
           <li><a class="show-1" href="#">Menu-1</a></li>
           <li><a class="show-2" href="#">Menu-2</a></li>
           <li><a class="show-3" href="#">Menu-3</a></li>
     </ul> <!-- /.menu -->
     <a href="#" class="toggle-menu"><i class="fa fa-bars"></i></a>
</div> <!-- /.menu-wrapper -->

使用css 更新

.menu-wrapper {
    display: block;
}
.menu-wrapper ul.menu {
    display: none;
    background-color: white;
    text-align: center;
}
.menu-wrapper ul.menu li {
    border-top: 1px solid #c7cdd8;
}
.menu-wrapper ul.menu li a {
    text-transform: uppercase;
    display: block;
    padding: 18px 30px;
    color: #333333;
    font-weight: 600;
    font-size: 18px;
}
.menu-wrapper a.toggle-menu {
    display: block;
    background-color: #f5af95;
    color: white;
    text-align: center;
}
.menu-wrapper a.toggle-menu i {
    padding: 10px 20px;
    font-size: 24px;
}

好的，如果我把你的问题100%正确的话。这是完整的代码。如果你需要添加/删除一些注释，我会更改它。JS/Jquery集成到html代码中

HTML

<html>
<head>
    <link rel="stylesheet" type="text/css" href="john.css">
    <!--libraries-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="menu-wrapper">
         <ul class="menu">
               <li><a class="homebutton" href="#">Home</a></li>
               <li><a class="show-1" href="#">Menu-1</a></li>
               <li><a class="show-2" href="#">Menu-2</a></li>
               <li><a class="show-3" href="#">Menu-3</a></li>
         </ul> <!-- /.menu -->
         <a href="#" class="toggle-menu"><i class="fa fa-bars"></i></a>
    </div> <!-- /.menu-wrapper -->
    <script>
        $(document).ready(function(){
            var clicked= true;
            $(".menu-wrapper").click(function(){
                if(clicked){
                    $(".menu-wrapper ul.menu").css("display", "none");
                    clicked = false;
                }else{
                    $(".menu-wrapper ul.menu").css("display", "block");
                    clicked= true;
                }
            })
        })

    </script>
</body>
</html>

CSS

.menu-wrapper {
display: block;
}
.menu-wrapper ul.menu {
    display: block;
    background-color: white;
    text-align: center;
 }
.menu-wrapper ul.menu li {
    border-top: 1px solid #c7cdd8;
 }
.menu-wrapper ul.menu li a {
    text-transform: uppercase;
    display: block;
    padding: 18px 30px;
    color: #333333;
    font-weight: 600;
    font-size: 18px;
}
 .menu-wrapper a.toggle-menu {
   display: block;
   background-color: #f5af95;
   color: white;
   text-align: center;
}
.menu-wrapper a.toggle-menu i {
   padding: 10px 20px;
   font-size: 24px;
}
相关文章：