javascript - 整体选择按钮

标签 javascript jquery html css

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

我希望按钮在事件状态下完全突出显示，但它只会突出显示按钮的右侧或按钮的左侧，请看下面，link4 是我有兴趣让它作为一个整体突出显示的那个包括右边的箭头。

enter image description here 

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

最佳答案

您可以更改:

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

与:

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

这意味着:将同级添加到当前 id，从而为整个按钮添加类。

片段:

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

关于javascript - 整体选择按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42075153/

上一篇：javascript - 如何检查并提醒是否有重复项插入到我的表中？

下一篇：javascript - 使用 Ionic 框架将 ionic 按钮居中

相关文章：

javascript - 在 jQuery 对象上调用 javascript 函数

html - 那里已经有 AngularJS 的 Canvas 绘图指令了吗？

css - 调整大小然后滚动浏览器窗口和绝对位置

html - 如果主体容器本身为 940px，我该如何正确使用 960 网格系统？

javascript - 如何让phaser 3全屏显示

javascript - 使用 JS 或 jQuery 从列表中选择多个项目

javascript - 无法读取 null 的属性 addEventListener

javascript - 获取 onClick 处理程序中使用的参数

javascript - 如何在reactjs中连接登录API

javascript - 关联数组是否像哈希表一样执行？

©2024 IT工具网  联系我们