javascript - JQuery手风琴菜单颜色在选择时保持变化
问题描述
当我点击菜单时,会出现子菜单(下拉菜单)...如何使菜单在选择时的背景颜色,只要它被选中(下拉菜单打开),与悬停颜色相同...当我关闭下拉菜单时它会恢复到初始颜色,谢谢
你可以在这里查看我的工作:teknomia 主页
$(document).ready(function() { $("#accordion h3").click(function(){ $("#accordion ul ul").slideUp(); if(!$(this).next().is(":visible")) {$(this).next().slideDown();}})})
#accordion {margin: auto; border-top: 4px solid #333; border-left: 4px solid #333; border-right: 4px solid #333; width: 90%;}
#accordion h3 {font-size: 150%; padding: 45px 15px; color:#333; cursor: pointer; background:#fff; border-bottom:4px solid #333;}
#accordion h3:hover {background:#EA4335;}
#accordion li {list-style-type: none; padding:0; margin:0;}
#accordion li:nth-child(odd){background-color:#A1C5FF;}
#accordion li:nth-child(even){background-color:#4285F4;}
#accordion ul ul li a {border-bottom:2px solid #333; color: #3b3b3b; text-decoration: none; font: 15px; display: block; padding: 8px 0 8px 8px;}
#accordion ul ul li a:hover {background:#34A853; padding-left:15px;}
#accordion ul ul {display: none;}
#accordion li .active ul {display: block;}
#accordion ul{list-style:none; margin:0; padding:0;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordion">
<ul>
<li><h3>
Whatsapp Mod</h3>
<ul>
<li><a href="/">Sub Heading 1</a></li>
<li><a href="/">Sub Heading 2</a></li>
<li><a href="/">Sub Heading 3</a></li>
</ul>
</li>
<li><h3>
Game PC</h3>
<ul>
<li><a href="/">Sub Heading 4</a></li>
<li><a href="/">Sub Heading 5</a></li>
<li><a href="/">Sub Heading 6</a></li>
</ul>
</li>
<li><h3>
Main Heading 3</h3>
<ul>
<li><a href="/">Sub Heading 7</a></li>
<li><a href="/">Sub Heading 8</a></li>
<li><a href="/">Sub Heading 9</a></li>
</ul>
</li>
<li><h3>
Main Heading 4</h3>
<ul>
<li><a href="/">Sub Heading 10</a></li>
<li><a href="/">Sub Heading 11</a></li>
<li><a href="/">Sub Heading 12</a></li>
</ul>
</li>
</ul>
</div>
解决方案
比方说,创建一个类,active
它将与样式具有相同的:hover
样式。h3
当您向下滑动相应的列表以提供所需的效果时,将该类添加到元素中。
这是执行相同操作的代码段的修改版本。
$(document).ready(function() {
$("#accordion h3").click(function(){
$("#accordion ul ul").slideUp();
$("#accordion ul li h3").removeClass('active');
if(!$(this).next().is(":visible")) {
$(this).next().slideDown();
$(this).addClass('active');
}
})
})
#accordion {margin: auto; border-top: 4px solid #333; border-left: 4px solid #333; border-right: 4px solid #333; width: 90%;}
#accordion h3 {font-size: 150%; padding: 45px 15px; color:#333; cursor: pointer; background:#fff; border-bottom:4px solid #333;}
#accordion h3:hover {background:#EA4335;}
#accordion h3.active {background:#EA4335;}
#accordion li {list-style-type: none; padding:0; margin:0;}
#accordion li:nth-child(odd){background-color:#A1C5FF;}
#accordion li:nth-child(even){background-color:#4285F4;}
#accordion ul ul li a {border-bottom:2px solid #333; color: #3b3b3b; text-decoration: none; font: 15px; display: block; padding: 8px 0 8px 8px;}
#accordion ul ul li a:hover {background:#34A853; padding-left:15px;}
#accordion ul ul {display: none;}
#accordion li .active ul {display: block;}
#accordion ul{list-style:none; margin:0; padding:0;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordion">
<ul>
<li><h3>
Whatsapp Mod</h3>
<ul>
<li><a href="/">Sub Heading 1</a></li>
<li><a href="/">Sub Heading 2</a></li>
<li><a href="/">Sub Heading 3</a></li>
</ul>
</li>
<li><h3>
Game PC</h3>
<ul>
<li><a href="/">Sub Heading 4</a></li>
<li><a href="/">Sub Heading 5</a></li>
<li><a href="/">Sub Heading 6</a></li>
</ul>
</li>
<li><h3>
Main Heading 3</h3>
<ul>
<li><a href="/">Sub Heading 7</a></li>
<li><a href="/">Sub Heading 8</a></li>
<li><a href="/">Sub Heading 9</a></li>
</ul>
</li>
<li><h3>
Main Heading 4</h3>
<ul>
<li><a href="/">Sub Heading 10</a></li>
<li><a href="/">Sub Heading 11</a></li>
<li><a href="/">Sub Heading 12</a></li>
</ul>
</li>
</ul>
</div>
我希望这有帮助
推荐阅读
- windows - 信息:在执行 `where git` 时找不到给定模式的文件
- r - 在使用模式对话框进行用户输入的 R Shiny App 中,如何在首次调用时显示默认表?
- python - 无法使用 is_decoder = True 来拥抱面部变形器
- typescript - 如何在打字稿类型中指定数组的最大长度(具有不同的替代类型)?
- javascript - 如何使用 antd 在 DatePicker 中禁用假期日期
- javascript - 子类的上限范围是什么?
- android - 为什么在初始化绑定时会出现“ kotlin.UninitializedPropertyAccessException: lateinit property binding has not been initialized ”?
- r - 使用 R (rvest) 抓取表格
- python - 如何根据索引数量格式化列表
- xml - xslt apply-template 如何处理相同的子树匹配?