Question

您好！这是我的菜单！我现在想要的是，当我点击程序时，我希望仍然显示下拉菜单，但不太确定如何操作。如果有人也知道如何在我点击下拉菜单中的链接后我也可以使下拉菜单保持不变（当我被定向到另一页时）

 <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="sv">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Nösnäs</title>
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="stylesheet" type="text/css" media="screen" href="mobilemenu.css"/>
        <link rel="stylesheet" type="text/css" href="screen.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
            $(".nav-button").on('click',function () {
            $(".nav-button,.nav").toggleClass("open");
            });    
        });
        </script>
</head>
<body>

<button class="nav-button">Toggle Navigation</button>





<ul class="nav">
<li><a href="#">Program</a>
<div class="second nav">
  <ul>
<li><a href="#">Teknik</a></li>
<li><a href="#">Naturvetenskap</a></li>
<li><a href="#">El</a></li>
</ul></li>
</div>
  <li><a href="#">Nösnäs</a></li>
  <li><a href="#">Schema</a></li>
  <li><a href="#">Matsal</a></li>
   </ul>




<style>.xg_module_body img {margin:0!important;}</style>
<span class="bilder">
<div align="center"><table cellpadding="0" width="150"  cellspacing="0"><tr>
<td><a href="#" target="_blank"><img src="facebookpic.png" title="Gilla våran Facebook sida" width="35" height="35" border="0"></a></td>

<td><a href="#"target="_blank"><img src="googlepic.png" title="Gilla oss på googlde+" width="35" height="35" border="0"></a></td>

<td><a href="#" target="_blank"><img src="twitterpic.png" title="Följ oss på Twitter" width="35" height="35" border="0"></a></td>

<td><a href="#" target=""><img src="rsspic.png" width="35" height="35" border="0" title="Följ våran RSS"></a></td>
</tr>
</table></div>
</span>

<style>.xg_module_body img {margin:0!important;}</style>
<span class="bilderna">
<div align="center"><table cellpadding="0" width="150"  cellspacing="0"><tr>
<td><a href="#" target="_blank"><img src="facebookpic.png" title="Gilla våran Facebook sida" width="35" height="35" border="0"></a></td>

<td><a href="#"target="_blank"><img src="googlepic.png" title="Gilla oss på googlde+" width="35" height="35" border="0"></a></td>

<td><a href="#" target="_blank"><img src="twitterpic.png" title="Följ oss på Twitter" width="35" height="35" border="0"></a></td>

<td><a href="#" target=""><img src="rsspic.png" width="35" height="35" border="0" title="Följ våran RSS"></a></td>
</tr>
</table></div>
</span>


</body>
</html>


* { margin:0;
padding:0;
}

html {height: 100%;}

body{
    position: relative;
    height: 100%;
    background: #fff;

}



/* Första boxarna*/
ul.nav {
    list-style: none;
    display: block;
    width: 170px;
    position: relative;
    top: :0px;
    left: 10px;
    z-index:0;
    padding: 100px 0 50px 0;
    background: url(sh.png) no-repeat;
    -webkit-background-size: 50% 100%;
    display: list-item;
    font-family: OpenSans-Regular;
    font-size: 18px;

}




li {
    margin: 5px 0 0 0;
}

/* När jag drar musen över */
ul.nav li a  {
    -webkit-transition: all 0.3s ease-out;

    color: #174867;
    padding: 7px 15px 7px 15px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 5px;

    display: block;
    text-decoration: none;
    -webkit-box-shadow: 2px 2px 4px 2px #888;
}

ul.nav li a:hover {
    background: #ebebeb url(border.png) no-repeat;
    color: #67a5cd;
    padding: 9px 15px 7px 30px;
}
ul.nav li ul { 
display:none;
}
ul.nav li:active ul { 
display:block;
position:relative;
left:3px;
top:0px;
list-style: none;
z-index:999;
background: #888;
}

ul.nav li ul li
{ 
background:#888;

}

Answer 1

In you css   
ul.nav li ul { 
    display:none;
    }
   so thats why on click it is not displayed

I gave a class in li for the program li.
<li class="program"><a href="#">Program</a>



     Below is the javascript.



         $(".program").on('click',function () {
                            $('li div ul').show();

                    });

Js Fiddle demo http://jsfiddle.net/2N9Y8/1/

Answer 2

    javascript

    $(".program").on('click',function () {
                    $('li div ul').toggle('.close'); // new added
                    $('li div ul').show();

            });


    css

    .close{display:none;} // new added

http://jsfiddle.net/2N9Y8/2/

单击后使菜单保持不变

2 个答案: