手风琴菜单保持打开状态直到关闭答案

【问题标题】：Accordion menu stay open until it closed手风琴菜单保持打开状态直到关闭
【发布时间】：2015-03-21 23:00:08
【问题描述】：

默认情况下，当页面加载关闭时，我有手风琴菜单女巫，用户必须单击菜单才能打开它。当页面加载打开并始终保持打开并在单击时关闭时，我怎样才能做到这一点？这是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;
}

【问题讨论】：

您可以在单击时更改其高度 .css() 并在关闭时将其动画回0
好的，谢谢。根据您的评论，我找到了this 并添加了$( this ).height( ).css({ cursor: "auto", });，但页面加载时菜单仍未打开。当我单击并打开一次时，它保持打开状态，但页面加载关闭。你也可以帮忙吗？
哦，抱歉错过了您最初希望它打开的部分。为什么不直接在初始 CSS 中设置高度？像 .menu-wrapper{ 高度：...}。它最初将具有您想要的高度，然后再次单击将其恢复为关闭状态。如果我的问题有误，请告诉我
你也可以这样做 $(this).css("height", "...px")。我打错了对不起你不需要 .height()
对不起，我不明白该放在哪里..

标签： javascript jquery html css

【解决方案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;
}

【讨论】：

它只是最后一件事..现在当我点击某个菜单项（这是另一个 page.php ）正在加载新页面但就像我点击主页按钮一样，我必须再次点击在菜单项上向我显示该页面..当我单击菜单项以首先加载该页面而不是主页部分时是否有选项。？
太棒了。请记住接受答案（单击该勾号图标）以备将来使用。我不完全明白你的问题。我想你修改了你的代码，你能在这里更新它还是用更新的代码打开一个新问题。现在你的元素有 href #，它将把你送回当前页面（主页）。您可能希望将其更改为 page1.html 或其他任何内容（如果您还没有）
是的，我会接受只是想澄清这一点。这是这种情况。您在 example.com/index.php 上。然后你点击Menu_1，通常会并且必须加载example.com/menu_1.php。现在的工作方式是加载 example.com/menu_1.php 但正在显示 index.php 页面，您必须再次单击 menu_1 才能加载 menu_1.php .. 这个 js 菜单有问题..跨度>
这很奇怪。您是否动态设置hrefs或body？检查 index.php 上的 href 可能只是一个简单的错误，您将 menu_1 的 href 设置为 index.php 之类的？我不能在没有看到实际代码的情况下进一步发表评论，因为我现在只有一个静态菜单栏，它不加载任何 php 文件或任何东西。我再次建议您使用最新代码打开一个新问题。在评论中发送问题的链接。这样，其他人就可以看到当前的问题并提供帮助。由于这是一个老问题，人们可能没有看到它。