Question

我的手风琴菜单女巫默认情况下，当页面加载关闭时，用户必须单击菜单才能打开它。如何在页面加载时打开并保持打开状态并在单击时关闭？这是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

<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;
}

Answer 1

好的，如果我的问题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;
}

手风琴菜单保持打开状态直至关闭

1 个答案: