Question

我正在尝试在您点击菜单时让我的菜单停留，我的意思是在点击它之后保留下拉菜单。这是我已经尝试过的代码（下面是Javascript），但由于某些原因，它在现实中对我不起作用。所以我现在正在寻求帮助。

<!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>
  <title>Nösnäs</title>

        <link rel="stylesheet" type="text/css" href="screen.css" />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
        <script src="script.js"></script>
</head>
<body>

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

<ul class="nav">
<li class="program"><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>






</body>
</html>






console.log("hej");

$(".program").on('click',function () {
console.log("hejssss");
                $('li div ul').toggle('.close');
                console.log("hejs");
                $('li div ul').show();

        });

Answer 1

试试这个标记：

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

这个Javascript：

$('li.program').on('click', function() {
    $('.secondNav').toggle();
});

这是DEMO！

Answer 2

您的HTML代码无效更改如下：

<ul class="nav">
   <li class="program"><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></div></li>
  <li><a href="#">Nösnäs</a></li>
  <li><a href="#">Schema</a></li>
  <li><a href="#">Matsal</a></li>
</ul>

和JS需要修改子菜单点击事件，如下所示：

$(".program").on('click',function () {
   $('li div ul').toggle('');
});
$('.nav > li div ul li a').click(function(e) {
   e.stopPropagation();
});

用css检查：http://jsfiddle.net/hRxRG/1/

点击后按下拉菜单

2 个答案: