0
私はナビゲーションの作業をしています。タグを2つに分けて全体的に分けたボタンを選択するのは少し面倒です。ボタン全体を選択する
ボタンをアクティブ状態で完全にハイライトしたいのですが、ボタンの右側またはボタンの左側を強調表示するだけです。下記を参照してください。リンク4は、ハイライト表示に興味があります全体は右の矢印を含む。
$('.arrow-up').on('click', function() {
$('i.fa', this).toggleClass('fa-chevron-up fa-chevron-down');
});
$('.bookmarks a').click(function(){
var id = $(this);
$('.bookmarks').find(".active").removeClass("active");
$(id).addClass('active');
localStorage.setItem('selectedolditem', id);
});
var selectedolditem = localStorage.getItem('selectedolditem');
if (selectedolditem !== null) {
$(selectedolditem).siblings().find(".active").removeClass('active');
$(selectedolditem).addClass('active');
}.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>
は、jQueryの.closest機能で働いていた – Mazz