我正在使用这个菜单,我的.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>
答案 0 :(得分: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');
&#13;
.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;
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
这是你在找什么?
$('.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");
if(!(id.hasClass('arrow-up'))){
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>