1
私はこのメニューを作成していますが、私は.activeクラスに少し問題があります。アクティブクラスはボタンの一部をクリックしたときにのみ発生します
アイデアは、私はこのようなボタンをクリックすると、青い背景のハイライトを持つことです。
私がしようとしているものを、私は、ボタンの右側をクリックすると、である（リンク2ボタンをハイライトしないでください。ドロップダウンメニューを開くだけです。ボタン（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>
は、第二の答えはしかし、私がやろうとしていたもののために少し良く働いていた、その答えをいただき、ありがとうございます。 – Lucky500