javascript - JQuery Accordion 菜单颜色在选择时保持变化

Question

当我点击菜单时，会出现子菜单(下拉)... 如何在选中时设置菜单的背景颜色，只要选中(下拉菜单打开)，与悬停颜色相同...当我关闭下拉菜单时它会恢复到初始颜色，谢谢

你可以在这里查看我的工作:teknomia homepage

$(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>

Answer 1

创建一个类，比方说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>

希望对你有帮助🤗