0
Ich arbeite mit einer Navigation, und ich habe ein bisschen Mühe, eine Taste zu wählen, die ich mit 2 ein Tags als Ganzes geteilt habe.Auswahl der Schaltfläche als Ganzes
Ich möchte, dass die Taste im aktiven Zustand vollständig hervorhebt, aber stattdessen entweder die rechte Seite der Schaltfläche oder die linke der Schaltfläche hervorhebt, siehe unten, link4 ist diejenige, an der ich interessiert bin ganz einschließlich des Pfeils nach rechts.
$('.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>
werfen Sie einen Blick auf die jQuery .closest Funktion – Mazz