文章/答案/技术大牛

发布

社区首页 >问答首页 >手风琴菜单一直打开直到关闭。

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

Stack Overflow用户

提问于 2015-03-21 23:00:08

回答 1查看 1K关注 0票数 0

我有手风琴菜单，默认情况下，加载页面关闭，用户必须单击菜单才能打开它。当页面被加载时，如何使其打开，并始终保持打开状态，并在单击时成为关闭状态？这是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;
}

html

css

javascript

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-03-22 22:59:14

好的，如果我把你的问题100%正确的话。这是完整的代码。如果您需要添加/删除注释，我将更改它。JS/Jquery集成到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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29189047

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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