javascript - 使菜单在点击后保持不变-6ren

javascript - 使菜单在点击后保持不变

转载作者：行者123 更新时间：2023-12-02 17:52:09

24

4

http://jsfiddle.net/2N9Y8/

你好!这是我的菜单!我现在想要的是，当我单击“程序”时，我希望仍然显示下拉菜单，但不太确定该怎么做。如果有人也知道我如何在单击下拉菜单中的链接后保留下拉菜单，那就太好了(当我被定向到另一个页面时)

http://jsfiddle.net/2N9Y8/

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

}

最佳答案

    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/

关于javascript - 使菜单在点击后保持不变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21254206/

24

4

0

文章推荐： javascript - Ajax 不通过 POST 向 PHP 发送变量

文章推荐： javascript - 正则表达式匹配连续的大括号

文章推荐： javascript - setTimeout加倍

MySQL根据SUM列别名计算两列之间的百分比差异(不变)
我有 2 个表 t1，其中存储价格和项目类型以及一个 ENUM 值和 t2，其中存储销售数量。我有一个计算总销售额(价格 * 数量)的查询，但我需要计算两个结果数字之间的差值。两个数之差的计算公式应
java -version 不变
我在使用 zsh 运行 Big Sur 11.2 的 Mac 上更改运行的 java 版本时遇到问题。我想将 Java 1.8 设置为默认设置，因此我使用以下命令设置 JAVA_HOME: $ uns
javascript - 如何触发选择元素的点击事件？ (不变)
在下面的代码中，当我改变选择时，会有一个alert。我试图使该功能类似于当我单击 option 时它会显示 alert。 $(document).ready(function() { $("#x"
Java GUI 不变
好吧，我正在制作一个简单的 react 游戏，我的代码如下。现在，当调用 startGame() 时，如果我注释掉 while 循环，一切都会发生，但是当我使用 thread.sleep(1000)
iphone - CFBundleURLTypes 不变
我目前正在尝试将 .plist 文件中的 CFBundleURLTypes 的值更改为新值，但似乎没有任何效果，并且如果我调用，旧值仍然存在 NSLog(@"%@", [[NSBundle mainB
java - 调用parse函数时如何保持"不变？
我正在尝试使用 Jsoup 中的解析函数来解析 html 字符串。我尝试阅读了很多相关的帖子以及API，但仍然没有找到答案。 String html = ""others"; Docume
android - layoutParams 不变
我正在尝试为水平列表项关闭设置动画alpha 动画有效，layoutparam 值也随时间减少但出于某种原因，这并没有改变列表项的实际高度。 @Override protected void appl
Ruby 常量双管道等于值与定义？不变
双管道等于: MY_CONST ||= 42 运算符定义？ MY_CONST = 42 unless defined? MY_CONST 为什么第二种方式更为普遍？第一个有什么缺点吗？最佳答案在一
.htaccess - 导航到另一个页面时保持网站 url 不变？
我希望我的站点地址栏在访问子页面时不要更改其地址，它应该显示我的 index.html ，即使我进入 tosub 页面。就像我打开 www.xyz.com我导航到它仍应显示的任何页面 www.xyz
codeigniter - 如何在codeigniter中保持 session 不变？
我试图通过将购物车存储在数据库的表中来创建购物车，而不是使用内置的 CI 购物车类。我使用 sessionID 来识别一个访问者和另一个访问者。但是我发现sessionID在一段时间内一直在变化，连访
java - 类(class)不变
我面临一个奇怪的问题。一旦更改了.java文件-看来测试仍在使用该文件的早期版本(.class)。从我的 Angular 来看，应该从.build文件夹中删除该类，并从新版本的.java文件重新编译
r - 将向量组合成矩阵后，如何保持向量的原始属性(不变)
下面的R代码显示了一个关于向量组合的例子，之后，向量“c”的属性变成了字符。如何让它仍然保持属性为数字？ a='aa';b='bb';c=c(1,2,3,4,5) dd=data.table(cbin
c# - SpeechRecognitionEngine.AudioLevel 不变
我一直在使用 Kinect 和语音识别，我注意到我无法让 AudioLevel 成员从我的 SpeechRecognitionEngine 对象中更改。我成功地让命令被识别，所以我知道 kinect
android - 通知 ID 不变
大家好，我已经实现了通知功能。我对通知 ID 有疑问。这是我的代码: protected void ShowNotification(String title, String text){ Noti
ios - CALayer shadowColor 不变
所以我第一次正确设置了 UIView 图层的阴影(它显示得非常好)但是当我尝试更改颜色时(没有别的，只是 layer.shadowColor)它不会在 View 中更新。它仍然显示原始颜色。我已经尝试
java - 如何保持每次运行的值(value)不变？
使用 java 我想在一个程序中生成一些随机值，然后在每次执行第二个程序时在其他程序中使用这些值。这样做的目的是生成一次随机值，然后在以后每次运行程序时保持并保持它们不变。有可能吗？谢谢最佳答案
java - JCheckBox 的值重置/不变
我有几个组件，所有组件都继承了 JCheckBox 而没有覆盖它的任何内容，存储在一个 vector 中，然后遍历该 vector 并将每个组件添加到一个对话框中 CreateLists(); //
iphone - 切换到另一个选项卡时使标题 View 不变
我有一个 UITabBarController。现在我想在其上方添加一个 View ，并在用户切换到另一个选项卡时使 View 保持不变。我尝试创建一个 UIViewController，并将 UIT
python - shutil.get_terminal_size() 不变
我正在使用 curses 来打印一个非常漂亮的控制台 UI，我需要它依赖于终端大小。为此，我阅读了 here ，我可以使用 shutil.get_terminal_size .所以我正在做这段代码:
javascript - 计算后总值(value)不变
我有一个jsfiddle here . fiddle 中有许多标记文本框。在文本框中输入一个数字，然后继续单击“添加问题”按钮。您将看到剩余的总分等于 10，但它不会改变。剩余分数的数量应该通过减去附

首页

博学

6Ren·AI

商城

javascript - 使菜单在点击后保持不变