Question

我正在使用导航，我在选择一个我用2个标签整体划分的按钮时遇到了一些麻烦。

我希望按钮在活动状态下完全突出显示，但它只是突出显示按钮的右侧或按钮的左侧，请参阅下面的内容，link4是我感兴趣的整体突出显示的整体包括右边的箭头。

＆＃13;

$('.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');
  }

＆＃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;

Answer 1

您可以更改：

$(id).addClass('active');

使用：

id.siblings().addBack().addClass('active');

这意味着：将兄弟节点添加到当前id，然后为整个按钮添加类。

摘录：

＆＃13;

$('.arrow-up').on('click', function(e) {
  $('i.fa', this).toggleClass('fa-chevron-up fa-chevron-down');
});

$('.bookmarks a').on('click', function(e) {
  var id = $(this);

  $('.bookmarks').find('.active').removeClass('active');
  id.siblings().addBack().addClass('active');
  //localStorage.setItem('selectedolditem', id);
});

＆＃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;

Answer 2

您的on click侦听器仅将活动类添加到单击的链接（按钮的左侧或右侧部分）。理想情况下，您应该监听链接包装器的onClick事件，并将自动添加到包装器中。但是如果你必须将类应用于包装器中的链接，那么可以尝试以下方法：

$('.dbl-link-wrapper').click(function(){
  var id = $(this);
 $('.bookmarks').find(".active").removeClass("active");
 $(id).find('a').addClass('active');
 localStorage.setItem('selectedolditem', id);
});

我为理解而创建的类似笔： http://codepen.io/anon/pen/xgJRvM

Answer 3

$(document).ready(function(){ 
    $('.bookmarks a').click(function() { 
        $('.bookmarks a').addClass('active');
    });
});

<!---css for activ button--->
.bookmarks li a:active{
   background: your background color;

}

<!-- language: lang-html -->

    <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>

<!-- end snippet -->

选择按钮作为一个整体

3 个答案: