jQuery手风琴菜单颜色在选定时保持更改

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>

我希望这会帮助🤗