javascript - anchor 标记 : Open div on click and change bg color on click

Question

.nav_bar {
  background: #c30015;
  margin-left: 50px;
  float: left; }
  .nav_bar ul {
    padding: 0;
    margin: 0;
    display: flex;
    border-bottom: thin white solid; }
    .nav_bar ul li {
      list-style: none; }
      .nav_bar ul li a {
        text-decoration: none;
        color: #ffffff;
        display: block;
        border-right: 1px solid #fff;
        padding: 8px 16px; }
  .nav_bar ul li a:hover {
    background: #e6b3a1;
    text-decoration: none;
    color: #c3000f; }

.down_nav_bar {
  background: #e6b3a1;
  margin-left: 34px;
  float: left; }
  .down_nav_bar ul {
    padding: 0;
    margin: 0;
    display: flex; }
    .down_nav_bar ul li {
      list-style: none; }
      .down_nav_bar ul li a {
        text-decoration: none;
        color: #c3000f;
        display: block;
        padding: 8px 23px 8px 18px; }
  .down_nav_bar ul li a:link {
    text-decoration: none; }
  .down_nav_bar ul li a:visited {
    border-bottom: 2px #c3000f solid;
    text-decoration: none; }
  .down_nav_bar ul li a:hover {
    border-bottom: 2px #c3000f solid;
    text-decoration: none; }
  .down_nav_bar ul li a:active {
    border-bottom: 2px #c3000f solid;
    text-decoration: none; }

<div class="nav_bar">
                <ul>
                                      <li><a href="#">Post sponsor job</a>
                    </li>
                    <li><a href="#">Applied KOLs</a>
                    </li>
                    <li><a href="#">Purchase and billing</a>
                    </li>
                    <li><a href="#">Account Settings</a>
                    </li>
                </ul>
            </div>




<div class="down_nav_bar">
                    <ul>
                        <li><a href="#">Purchase Plan</a>
                        </li>
                        <li><a href="#">My account</a>
                        </li>
                        <li><a href="">Invoice</a>
                        </li>
                        <li><a href="">How to pay</a>
                    </ul>
                </div>

您好， 我的疑问是，当我将鼠标悬停在 purchase billing 上时，第二个导航菜单应该出现在下方，并且当我们将鼠标悬停在 上时，purchase billing 应该具有相同的点击背景李.

就像

任何帮助都会很棒。

谢谢。

Answer 1

试试这个。此代码段在单击 purchase and billing 链接时显示下拉菜单

$(document).ready(function(){
  $('.down_nav_bar').removeClass('displayed');
  $('#purchase').mouseenter(function(){
    $('#purchase').addClass('newColor');
    $('.down_nav_bar').addClass('displayed');
  });
  $('.nav_bar>ul>li:not(#purchase)').mouseenter(function(){
    $('#purchase').removeClass('newColor');
    $('.down_nav_bar').removeClass('displayed');
  });
  $('.nav_bar>ul>li').click(function(){
    $('.nav_bar>ul>li').removeClass("newColor");
    $(this).toggleClass('newColor');
  });
});

.nav_bar {
  background: #c30015;
  margin-left: 50px;
  float: left; }
  .nav_bar ul {
    padding: 0;
    margin: 0;
    display: flex;
    border-bottom: thin white solid; }
    .nav_bar ul li {
      list-style: none; }
      .nav_bar ul li a {
        text-decoration: none;
        color: #ffffff;
        display: block;
        border-right: 1px solid #fff;
        padding: 8px 16px; }
  .nav_bar ul li a:hover {
    background: #e6b3a1;
    text-decoration: none;
    color: #c3000f; }

.down_nav_bar {
  background: #e6b3a1;
  margin-left: 34px;
  display:none;
  float: left; }
  .down_nav_bar ul {
    padding: 0;
    margin: 0;
    display: flex; }
    .down_nav_bar ul li {
      list-style: none; }
      .down_nav_bar ul li a {
        text-decoration: none;
        color: #c3000f;
        display: block;
        padding: 8px 23px 8px 18px; }
  .down_nav_bar ul li a:link {
    text-decoration: none; }
  .down_nav_bar ul li a:visited {
    border-bottom: 2px #c3000f solid;
    text-decoration: none; }
  .down_nav_bar ul li a:hover {
    border-bottom: 2px #c3000f solid;
    text-decoration: none; }
  .down_nav_bar ul li a:active {
    border-bottom: 2px #c3000f solid;
    text-decoration: none; }
.down_nav_bar.displayed{
  display:block;
}
.newColor{
  background: #e6b3a1;
  color:#c3000f;
}
.nav_bar ul li.newColor>a{
  color:#c3000f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav_bar">
                <ul>
                                      <li><a href="#">Post sponsor job</a>
                    </li>
                    <li><a href="#">Applied KOLs</a>
                    </li>
                    <li id="purchase"><a href="#">Purchase and billing</a>
                    </li>
                    <li><a href="#">Account Settings</a>
                    </li>
                </ul>
            </div>




<div class="down_nav_bar displayed">
                    <ul>
                        <li><a href="#">Purchase Plan</a>
                        </li>
                        <li><a href="#">My account</a>
                        </li>
                        <li><a href="">Invoice</a>
                        </li>
                        <li><a href="">How to pay</a>
                    </ul>
                </div>