javascript - .active 类仅在单击按钮的一部分时发生

Question

我正在处理这个菜单，但我的 .active 类有点问题。

我的想法是当我像这样点击按钮时让背景高亮显示为蓝色:

我想做的是，当我点击按钮 (link2) 的右侧时，该按钮不应该突出显示，它应该只是打开下拉菜单。按钮 (link2) 应该只在我点击时突出显示它的左侧(当我访问链接时)。

如有任何帮助，我们将不胜感激。

[![在此处输入图片描述][2]][2]

我的标记现在是这样的:

                $('.right-side').click(function(e) {
                    e.preventDefault();
                });
                $('.arrow-up').on('click', function() {
                    $('i.fa', this).toggleClass('fa-caret-up fa-caret-down');
                });

                $('.bookmarks a').click(function(){
                    var id = $(this);

                $('.bookmarks').find(".active").removeClass("active");
                $(id).siblings().addBack().addClass('active');
                //localStorage.setItem('selectedolditem', id);
                });

                //var selectedolditem = localStorage.getItem('selectedolditem');
            

.bookmarks {
  box-sizing: border-box;
  width: 162px;
  background-color: transparent;
  position: absolute;
  top: 16px;
  border:1px solid #D3D3D3;
  border-width: 1px 1px 0 1px;
}

.bookmarks .nav li {
  background-color: #999999;
  width: 160px;
}

.bookmarks .nav li a {
  font-size: 13px;
  padding: 15px 20px;
  border-bottom:1px solid #D3D3D3;
}

.products-bookmarks ul {
  list-style-type: none;
}

.products-bookmarks nav li:hover {
  color: inherit;
}

.products-bookmarks ul li a:hover {
  color: inherit;
}

.bookmarks li li:last-of-type {
  border-bottom: none;
}

.bookmarks .link4 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: #1e4056;
  border-bottom: 1px solid #d3d3d3;
  border-bottom: 0;
}

.dbl-link-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.bookmarks .link4 .left-side {
  border-bottom: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
  flex: 0 0 calc(79%);
}

.bookmarks .link4 .right-side {
  padding: 13px 0 12px 0;
}

.bookmarks .link4 .right-side {
  flex: 0 0 calc(20%);
  border-bottom: 1px solid #d3d3d3;
}

.bookmarks .link4 .left-side  span {
  padding: 15px;
}

.bookmarks .fa-chevron-down,
.bookmarks .fa-chevron-up {
  position: relative;
  top: 2px;
  left: 10px;
}


.bookmarks .nav .link4 a {
  border-left: none;
}

.bookmarks .link4 .right-side a {
  border-bottom: none;
}

.bookmarks .link4 .first-tree {
  padding-left: 0;
  list-style-type: none;
}


.bookmarks .first-tree {
  list-style-type: none;
  padding-left: 0;
}

.bookmarks .first-tree a {
  padding-left: 0;
}

.bookmarks .first-tree li a {
  border-bottom: none;
  color: #33b3ca;
  padding-left: 15px;
  display: block;
}

.bookmarks .first-tree li {
  border-bottom: 1px solid #d3d3d3;
  background-color: #efefef;
}

.bookmarks .double-btn .left-side {
  padding: 9px 9px 9px 12px;
  border-right: 1px solid #d3d3d3;
  flex: 0 0 calc(79%);
}

.bookmarks .double-btn .right-side {
  flex: 0 0 calc(20%);
  padding: 0;
}

.bookmarks .double-btn .fa-chevron-down,
.bookmarks .double-btn .fa-chevron-up {
  position: relative;
  top: 19px;
  left: 10px;
}

.bookmarks .double-btn ul {
  flex: 0;
  padding-left: 0;
  padding-right: 0px;
  list-style-type: none;
}

.bookmarks .first-tree li:nth-child(1) {
  background-color: #efefef;
}

.bookmarks .first-tree .double-btn {
  padding: 0;
}


.bookmarks .left-side .left-link {
  padding: 13px 0 12px 0;
}


.bookmarks .double-btn .right-side a {
  padding: 0;
}


.bookmarks .second-tree li {
  background-color: #ffffff;
}

.bookmarks .second-tree li:nth-child(1) {
  background-color: #ffffff;
}

/* HOVER DISPUTES */
.bookmarks .first-tree li:first-child:hover {
  background-color: #efefef;
  opacity: : .60;
}

.bookmarks .first-tree li:hover {
  background-color: #f2f2f2;
}

.bookmarks ul li a:hover {
  text-decoration: none;
  opacity: .6;
}

.bookmarks .second-tree li:first-child:hover,
.bookmarks .second-tree li:hover {
  background-color: #fff;
  opacity: : .9;
}

/* ACTIVE STATE AND TRIANGLE */
.bookmarks li:active {
  position: relative;
  /*background-color: none;*/

}

.active
{
  background-color: #2c3e50 !important;
  color: #fff !important;
  opacity: 1 !important;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="bookmarks" id="affix-nav">
    <ul class="nav top-menu" id="affix-ul">
        <li>
            <a href="#">
                Link 1
            </a>
        </li>
        <li>
            <a href="#">
                Link 2
            </a>
        </li>
        <li class="">
            <a href="#">
                Link 3
            </a>
        </li>
        <li class="link4">
            <div class="dbl-link-wrapper">
                <a href="#" class="left-side">
                    <span>Link 4</span>
                </a>
                <a href="#" class="arrow-up right-side" aria-hidden="true" data-toggle="collapse" data-target="#hiddenMenuOne">
                    <i class="fa fa-chevron-down">
                    </i>
                </a>
            </div>
            <ul id="hiddenMenuOne" class="collapse first-tree">
                <li>
                    <a href="#">SubLink 1</a>
                </li>
                <li>
                    <a href="#">SubLink 2</a>
                </li>
                <li>
                    <a href="#">SubLink 3</a>
                </li>
                <li>
                    <a href="#">SubLink 4</a>
                </li>
                <li>
                    <a href="#">SubLink 5</a>
                </li>
                <li>
                    <a href="#">SubLink 6</a>
                </li>
                <li class="clearfix double-btn">
                    <div class="dbl-link-wrapper">
                        <a href="#" class="nav-menu-link left-link left-side">
                            Sublink 7
                        </a>
                        <a href="#" class="right-side arrow-up" aria-hidden="true" data-toggle="collapse" data-target="#hiddenMenuTwo">
                            <i class="fa fa-chevron-down">
                            </i>
                        </a>
                    </div>
                    <ul id="hiddenMenuTwo" class="collapse second-tree">
                        <li>
                            <a href="#">Third Level - Link 1</a>
                        </li>
                        <li>
                            <a href="#">Third Level - Link 2</a>
                        </li>
                        <li>
                            <a href="#">Third Level - Link 3</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

您可以修改您的 jQuery click 事件处理程序，以仅更改没有您的 arrow-up 类的元素的颜色。完整的选择器是 .bookmarks a:not(.arrow-up)，我们在 .bookmarks 容器中选择任何不 有一个 arrow-up 类。

这应该适合你:

$('.right-side').click(function(e) {
  e.preventDefault();
});
$('.arrow-up').on('click', function() {
  $('i.fa', this).toggleClass('fa-caret-up fa-caret-down');
});

$('.bookmarks a:not(.arrow-up)').click(function(){
  var id = $(this);
  $('.bookmarks').find(".active").removeClass("active");
  $(id).siblings().addBack().addClass('active');
  //localStorage.setItem('selectedolditem', id);
});

//var selectedolditem = localStorage.getItem('selectedolditem');

.bookmarks {
  box-sizing: border-box;
  width: 162px;
  background-color: transparent;
  position: absolute;
  top: 16px;
  border:1px solid #D3D3D3;
  border-width: 1px 1px 0 1px;
}

.bookmarks .nav li {
  background-color: #999999;
  width: 160px;
}

.bookmarks .nav li a {
  font-size: 13px;
  padding: 15px 20px;
  border-bottom:1px solid #D3D3D3;
}

.products-bookmarks ul {
  list-style-type: none;
}

.products-bookmarks nav li:hover {
  color: inherit;
}

.products-bookmarks ul li a:hover {
  color: inherit;
}

.bookmarks li li:last-of-type {
  border-bottom: none;
}

.bookmarks .link4 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: #1e4056;
  border-bottom: 1px solid #d3d3d3;
  border-bottom: 0;
}

.dbl-link-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.bookmarks .link4 .left-side {
  border-bottom: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
  flex: 0 0 calc(79%);
}

.bookmarks .link4 .right-side {
  padding: 13px 0 12px 0;
}

.bookmarks .link4 .right-side {
  flex: 0 0 calc(20%);
  border-bottom: 1px solid #d3d3d3;
}

.bookmarks .link4 .left-side  span {
  padding: 15px;
}

.bookmarks .fa-chevron-down,
.bookmarks .fa-chevron-up {
  position: relative;
  top: 2px;
  left: 10px;
}


.bookmarks .nav .link4 a {
  border-left: none;
}

.bookmarks .link4 .right-side a {
  border-bottom: none;
}

.bookmarks .link4 .first-tree {
  padding-left: 0;
  list-style-type: none;
}


.bookmarks .first-tree {
  list-style-type: none;
  padding-left: 0;
}

.bookmarks .first-tree a {
  padding-left: 0;
}

.bookmarks .first-tree li a {
  border-bottom: none;
  color: #33b3ca;
  padding-left: 15px;
  display: block;
}

.bookmarks .first-tree li {
  border-bottom: 1px solid #d3d3d3;
  background-color: #efefef;
}

.bookmarks .double-btn .left-side {
  padding: 9px 9px 9px 12px;
  border-right: 1px solid #d3d3d3;
  flex: 0 0 calc(79%);
}

.bookmarks .double-btn .right-side {
  flex: 0 0 calc(20%);
  padding: 0;
}

.bookmarks .double-btn .fa-chevron-down,
.bookmarks .double-btn .fa-chevron-up {
  position: relative;
  top: 19px;
  left: 10px;
}

.bookmarks .double-btn ul {
  flex: 0;
  padding-left: 0;
  padding-right: 0px;
  list-style-type: none;
}

.bookmarks .first-tree li:nth-child(1) {
  background-color: #efefef;
}

.bookmarks .first-tree .double-btn {
  padding: 0;
}


.bookmarks .left-side .left-link {
  padding: 13px 0 12px 0;
}


.bookmarks .double-btn .right-side a {
  padding: 0;
}


.bookmarks .second-tree li {
  background-color: #ffffff;
}

.bookmarks .second-tree li:nth-child(1) {
  background-color: #ffffff;
}

/* HOVER DISPUTES */
.bookmarks .first-tree li:first-child:hover {
  background-color: #efefef;
  opacity: : .60;
}

.bookmarks .first-tree li:hover {
  background-color: #f2f2f2;
}

.bookmarks ul li a:hover {
  text-decoration: none;
  opacity: .6;
}

.bookmarks .second-tree li:first-child:hover,
.bookmarks .second-tree li:hover {
  background-color: #fff;
  opacity: : .9;
}

/* ACTIVE STATE AND TRIANGLE */
.bookmarks li:active {
  position: relative;
  /*background-color: none;*/

}

.active
{
  background-color: #2c3e50 !important;
  color: #fff !important;
  opacity: 1 !important;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="bookmarks" id="affix-nav">
    <ul class="nav top-menu" id="affix-ul">
        <li>
            <a href="#">
                Link 1
            </a>
        </li>
        <li>
            <a href="#">
                Link 2
            </a>
        </li>
        <li class="">
            <a href="#">
                Link 3
            </a>
        </li>
        <li class="link4">
            <div class="dbl-link-wrapper">
                <a href="#" class="left-side">
                    <span>Link 4</span>
                </a>
                <a href="#" class="arrow-up right-side" aria-hidden="true" data-toggle="collapse" data-target="#hiddenMenuOne">
                    <i class="fa fa-chevron-down">
                    </i>
                </a>
            </div>
            <ul id="hiddenMenuOne" class="collapse first-tree">
                <li>
                    <a href="#">SubLink 1</a>
                </li>
                <li>
                    <a href="#">SubLink 2</a>
                </li>
                <li>
                    <a href="#">SubLink 3</a>
                </li>
                <li>
                    <a href="#">SubLink 4</a>
                </li>
                <li>
                    <a href="#">SubLink 5</a>
                </li>
                <li>
                    <a href="#">SubLink 6</a>
                </li>
                <li class="clearfix double-btn">
                    <div class="dbl-link-wrapper">
                        <a href="#" class="nav-menu-link left-link left-side">
                            Sublink 7
                        </a>
                        <a href="#" class="right-side arrow-up" aria-hidden="true" data-toggle="collapse" data-target="#hiddenMenuTwo">
                            <i class="fa fa-chevron-down">
                            </i>
                        </a>
                    </div>
                    <ul id="hiddenMenuTwo" class="collapse second-tree">
                        <li>
                            <a href="#">Third Level - Link 1</a>
                        </li>
                        <li>
                            <a href="#">Third Level - Link 2</a>
                        </li>
                        <li>
                            <a href="#">Third Level - Link 3</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>