我为一个简单的菜单开发了以下代码:
$(document).ready(function () {
$(".main_menu_01, .main_menu_02").on('click', function () {
var $panel = $(this).next('.panel');
if ($panel.is(':visible')) {
$panel.add($panel.find('.panel')).slideUp(500).removeClass('active');
} else {
$panel.slideDown(500).addClass('active');
}
});
});
.panel{
width: 100%;
padding-left: 0%;
font-weight: bold;
overflow: hidden;
display:none;
}
.main_menu_01 {
padding-left: 1%;
background: blue;
}
.main_menu_02 {
padding-left: 5%;
background: lime;
}
.sub_menu_01{
padding-left: 1%;
background: lime;
}
.sub_menu_02{
padding-left: 10%;
background: lime;
}
.main_menu_01:before, .main_menu_02:before {
content:'+';
width:20px;
display:inline-block;
}
.main_menu_01.active:before, .main_menu_02.active:before {
content:'-';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li class="main_menu_01"> 1.0 Main Menu </li>
<ul class="panel">
<li class="sub_menu_01"> 1.1 Sub Menu </li>
<li class="main_menu_02"> 1.2 Sub Menu </li>
<ul class="panel">
<li class="sub_menu_02"> <a> 1.2.1 Sub Menu </a> </li>
<li class="sub_menu_02"> <a> 1.2.2 Sub Menu </a> </li>
</ul>
</ul>
目前一切正常。您还可以在 JSFiddle here 中找到代码.
如您所见,我想根据菜单是否打开向 main_menu
按钮添加 +
和 -
符号。因此,我尝试使用 CSS
中的 before
代码。但是,目前 +
符号仍然存在,尽管菜单已打开。
我不确定这个问题是否是由 jQuery
代码引起的。但是,我需要此 jQuery
代码来关闭/打开整个菜单,以防单击按钮 main_menue_01
。
您是否知道我需要更改代码中的哪些内容才能拥有 jQuery
代码和 +/-
符号提供的完整功能?
最佳答案
您需要在横幅上设置 active
类,即发生点击的位置。从那里您可以根据状态更改样式,例如
$(document).ready(function () {
$(".main_menu_01, .main_menu_02").on('click', function () {
var $panel = $(this).next('.panel');
if ($panel.is(':visible')) {
$panel.add($panel.find('.panel')).slideUp(500);
$(this).hasClass('main_menu_01') ? $('.menu').removeClass('active') : $(this).removeClass('active');
} else {
$panel.slideDown(500);
$(this).addClass('active');
}
});
});
.panel{
width: 100%;
padding-left: 0%;
font-weight: bold;
overflow: hidden;
display:none;
}
.main_menu_01 {
padding-left: 1%;
background: blue;
}
.main_menu_02 {
padding-left: 5%;
background: lime;
}
.sub_menu_01{
padding-left: 1%;
background: lime;
}
.sub_menu_02{
padding-left: 10%;
background: lime;
}
.main_menu_01:before, .main_menu_02:before {
content:'+';
width:20px;
display:inline-block;
}
.main_menu_01.active:before, .main_menu_02.active:before {
content:'-';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li class="menu main_menu_01"> 1.0 Main Menu </li>
<ul class="panel">
<li class="sub_menu_01"> 1.1 Sub Menu </li>
<li class="menu main_menu_02"> 1.2 Sub Menu </li>
<ul class="panel">
<li class="sub_menu_02"> <a> 1.2.1 Sub Menu </a> </li>
<li class="sub_menu_02"> <a> 1.2.2 Sub Menu </a> </li>
</ul>
</ul>
关于jquery - 向 jQuery 菜单添加加号/减号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53324915/
我正在 gnuplot 中生成 .eps 数字,以包含在使用 LaTeX 排版的论文中,使用 set terminal postscript eps enhanced "Helvetica" 14 这
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。 这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
我目前正在做以下作业: CREATE TABLE T_1 (COURSE_NO CHAR(8) PRIMARY KEY, COURSE_NAME CHAR(50) ); CREATE TABLE T_
我最近在 Bash 脚本中发现了这样一个片段: $ echo ${A=3} 现在,我知道 ${A:=3}将设置变量 A如果A是“假的”,或${A:-3}如果 A 将返回 3是“虚假的”。不过,我从未见
是否有“-”减号的 UIBarButtonSystem 图标?与此相反: 谢谢。 最佳答案 不,所有可用的图标都是 here .您可以改用自定义 View 。 关于objective-c - UIBa
我有一个元素,需要它的宽度没有(!)垂直滚动条。 Firebug 告诉我 body 宽度是 1280px。 这些在 Firefox 中都可以正常工作: console.log($('.element'
我无法理解以下内容。在 Clojure 中定义 main 函数时(基于 Leinigen 生成的代码),有一个 -函数名前的符号main . 我访问了 clojure.com 上的原始文档,发现 de
我在图形的 Scala 实现中遇到过这个运算符(您可以找到示例 here ,其中两个列表插入运算符 -- 和两个 Maps。 abstract class GraphBase[T, U] { ca
我以前从未处理过正则表达式。对于仅包含数字 (0-9)、加号 (+) 和减号 (-) 以及井号 (#) 的字符串,我应该使用什么组合?顺序并不重要。 最佳答案 很简单: [0-9+#-]+ 演示:ht
我想使用加号/减号图标而不是向下箭头。我已经尝试过,但我不知道什么时候必须添加减号图标或加号图标。请指导我非常感谢 最佳答案 这件事让我发疯 在..\catalog\view\theme\YOURTH
我有以下 jQuery 菜单,您也可以在 JSfiddle here 中找到它: $(document).ready(function () { $(".main_menu_01, .main
我为一个简单的菜单开发了以下代码: $(document).ready(function () { $(".main_menu_01, .main_menu_02").on('click',
char sign = '+'; cout > sign; if ( sign != '+' || sign != '-' ) { cout << "you c
Linux:减号 -* 在行尾的 bash 脚本中意味着什么: tar -czvf $pfad/toolkitdb.log.`date -d "yesterday" +%Y-%m-%d`.tar.g
在 cron 语法中,行首的加号和减号是什么意思? + 0 9 * * * /usr/bin/curl -k http://www.example.com/cron/deactivate_users
有没有办法随机化加号或减号字符?我有一个程序,其中一个 Sprite 在屏幕上移动,当你点击它时,它会重新出现在不同的地方。我也希望它移动的方向也是随机的。目前我只能将它设置为从左到右+,或者从右到左
问题 我正在尝试使用名为 data-maxchars 的属性声明一个匿名类型. 因为减号是一个运算符,它将我想要的属性名称降级(?)为一个操作,我得到一个编译错误:Invalid anonymous
public void Foo(double d){ // when called below, d == 2^32-1 ... } public void Bar(){ ui
在 ERb 序列末尾使用“-”(减号)有什么意义? 例子: FooBar Sometext 无论我是否使用'-',浏览器都会呈现相同的输出。 谢谢,Aplha。 最佳答案 在 Rails 3
我的问题很简单,但我没有找到答案。 我想从 git diff 中的每一行中删除前导加号/减号。在你问我为什么要这样做之前,请允许我概述一下我的理由: 恰好 80 个字符的行会溢出一个字符,这看起来很尴
我是一名优秀的程序员,十分优秀!