切换手风琴导航标题的图标

Question

鉴于以下导航，我需要能够切换“HEADER”，以便当其中一个打开时，+变为-，但是当您点击相同的标题时再一次，它再次成为+。当再次点击它时，它目前仍为-。主导航应与子导航功能相同，但不是箭头，而是如上所述更改+和-。

HTML

    <div class="inner">
  <button data-target="#data-nav-0" data-toggle="collapse" data-state="show" class="list-header major no-style"> <span>HEADER</span> </button>
  <div class="col-wrapper collapse in" id="data-nav-0" style="display: block;">
    <div class="column">
      <ul class="list-unstyled">

        <li class="list-header mobile"><a href="#" class="link">link</a></li>
        <li class="list-header desktop"><a href="#">head</a></li>
        <li class="mobile chevron-right" data-target="#data-inner-0-0" data-toggle="collapse" data-state="hide">
          <button class="no-style sub-header">This should toggle the ul links</button>
        </li>

        <ul class="inner collapse" id="data-inner-0-0">
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
        </ul>
      </ul>
    </div>
    <div class="column">
      <ul class="list-unstyled">
        <li class="list-header desktop"><a href="#">Link</a></li>
        <li class="mobile chevron-right" data-target="#data-inner-0-1" data-toggle="collapse" data-state="hide">
          <button class="no-style sub-header">This should toggle the ul links</button>
        </li>

        <ul class="inner collapse" id="data-inner-0-0">
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
        </ul>
      </ul>
      </ul>
    </div>
  </div>
</div>

<div class="inner">
  <button data-target="#data-nav-0" data-toggle="collapse" data-state="show" class="list-header major no-style"> <span>HEADER</span> </button>
  <div class="col-wrapper collapse in" id="data-nav-0" style="display: block;">
    <div class="column">
      <ul class="list-unstyled">

        <li class="list-header mobile"><a href="#" class="link">link</a></li>
        <li class="list-header desktop"><a href="#">head</a></li>
        <li class="mobile chevron-right" data-target="#data-inner-0-0" data-toggle="collapse" data-state="hide">
          <button class="no-style sub-header">This should toggle the ul links</button>
        </li>

        <ul class="inner collapse" id="data-inner-0-0">
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
        </ul>
      </ul>
    </div>
    <div class="column">
      <ul class="list-unstyled">
        <li class="list-header desktop"><a href="#">Link</a></li>
        <li class="mobile chevron-right" data-target="#data-inner-0-1" data-toggle="collapse" data-state="hide">
          <button class="no-style sub-header">This should toggle the ul links</button>
        </li>

        <ul class="inner collapse" id="data-inner-0-0">
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
        </ul>
      </ul>
      </ul>
    </div>
  </div>
</div>

的jQuery

$('.list-header.major').next('div').toggle();
    $('.list-header.major').click(function(){
    $('.list-header.major').next('div').slideUp();
      $(this).next('div').toggle();
      $('.list-header').removeClass('active');
      $(this).toggleClass('active');
      return false;
    });

$('.mobile').next('ul').toggle();
$('.mobile').click(function() {
  $('.mobile').next('ul').slideUp();
  $(this).next('ul').toggle();
  $('.mobile button').removeClass('active');
  if ($(this).next('ul').is(':visible')) {
      $(this).find('button').addClass('active');
  }
  return false;
});

CSS

 button.list-header.major {
  &:before,
  &:after {
    color: $purple;
    font-family: 'Material Icons';
    font-size: 20px;
    position: absolute;
    right: 20px;
  }

  &:before {
    content: "\E145"; <--THIS IS A PLUS SIGN
  }

  &:after {
    content: "\E15B"; <--THIS IS A MINUS SIGN
  }
}
.sub-header:after{
      content: " >";
      font-family: 'Material Icons';
      display: inline-block;
      transform: rotate(0);
      font-size: 26px;
      color: $white;
      position: relative;
      top: 8px;
      transition: transform .3s;
    }
    .sub-header.active:after{
      content: " v";
      color: red;
      display: inline-block;
      transform: rotate(8deg);
      font-size: 26px;
      color: $neon-green;
      transition: transform .3s;
    }

的jsfiddle： https://jsfiddle.net/jdkwcpva/10/

// // UPDATE

我发现听众的状态始终处于有效状态，切换+或-符号的唯一方法是从{{1}切换data-state } show，基于hide类.col-wrapper的状态style或display:none。

问题是如何查找display: block类的显示状态，并根据是否已点击.col-wrapper来更改data-state。我已经从下面的小提琴（https://jsfiddle.net/2bu35uLn/3/show/）中包含了状态的屏幕截图。

这是关闭状态

这是开放状态 请注意，.list-header类有.col-wrapper来显示子区域，但display:block类仍设置为.list-header，这样可以防止标题被切换。

如果data-state="hide"类为data-state，我正尝试将hide定位为更改为.col-wrapper，但执行以下操作：

display:none

基本上，问题是如果用户点击另一个标题，图标不会切换回加号。这应该强制任何已关闭的列表标题返回加号。

Answer 1

你差不多完成了。

我添加了更多东西。

$('.list-header.major').next('div').toggle();
    $('.list-header.major').click(function(){
    $('.list-header.major').next('div').slideUp();
      isActive = $(this).hasClass('active');
      $('.list-header.major').removeClass('active');
      if(isActive){
        $(this).removeClass('active') }
      else{
        $(this).addClass('active').next('div').slideDown();
      }
      return false;
    });

$('.mobile').next('ul').toggle();
$('.mobile').click(function() {
  $('.mobile').next('ul').slideUp();
  $(this).next('ul').toggle();
  $('.mobile button').removeClass('active');
  if ($(this).next('ul').is(':visible')) {
      $(this).find('button').addClass('active');
  }
  return false;
});

看看这个： https://jsfiddle.net/2bu35uLn/

Answer 2

我的建议是（见评论：我改变了下一行）。

这是有效的，因为如果它不存在，toggleclass会添加该类，如果存在则删除它。

＆＃13;

＆＃13;

.fixed-hero-slider  .owl-stage {
    direction: ltr;
}
.fixed-hero-slider  .owl-item {
    width: 100% !important;
    margin-right: 0px !important;
}

＆＃13;

$(function () {
  $('.list-header.major').next('div').toggle();
  $('.list-header.major').click(function(){
    $('.list-header.major').next('div').slideUp();
    $(this).next('div').toggle();
    
    // I changed the next line
    $('.list-header.major').not(this).removeClass('active');
    
    
    $(this).toggleClass('active');
    return false;
  });

  $('.mobile').next('ul').toggle();
  $('.mobile').click(function() {
    $('.mobile').next('ul').slideUp();
    $(this).next('ul').toggle();
    $('.mobile button').removeClass('active');
    if ($(this).next('ul').is(':visible')) {
      $(this).find('button').addClass('active');
    }
    return false;
  });
});

＆＃13;

.list-header.major:after{
  content: " +";
  color: red;
}
.list-header.major.active:after{
  content: " -";
  color: red;
}
.sub-header:after{
  content: " >";
  font-family: 'Material Icons';
  display: inline-block;
  transform: rotate(0);
  font-size: 26px;
  color: $white;
  position: relative;
  top: 8px;
  transition: transform .3s;
}
.sub-header.active:after{
  content: " v";
  color: red;
  display: inline-block;
  transform: rotate(8deg);
  font-size: 26px;
  color: $neon-green;
  transition: transform .3s;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

我能做的是检查点击的元素是否已打开，然后隐藏所有列表。如果点击的元素开始关闭，那么我就能够显示它。此代码段适用于您：

$('.list-header.major').click(function(){
  var is_open = false;
  if ($(this).hasClass('active')){
    is_open = true;
  }
  $('.list-header.major').next('div').slideUp();
  $('.list-header.major').removeClass('active');
  if (!is_open) {
    $(this).addClass('active');
    $(this).next('div').slideDown();
  }
});

$('.mobile').click(function() {
  var is_open = false;
  if ($(this).children('button').hasClass('active')){
    is_open = true;
  }
  $('.mobile').next('li').slideUp();
  $('.mobile').children('button').removeClass('active');
  if(!is_open){
    $(this).next('li').slideDown();
    $(this).children('button').addClass('active');
  }
});

.major-content, .mobile-content{ display:none; }
.mobile-content{ list-style:none }

.list-header.major:after{
  content: " +";
  color: red;
}
.list-header.major.active:after{
  content: " -";
  color: red;
}
.sub-header:after{
      content: " >";
      font-family: 'Material Icons';
      display: inline-block;
      transform: rotate(0);
      font-size: 26px;
      color: $white;
      position: relative;
      top: 8px;
      transition: transform .3s;
    }
    .sub-header.active:after{
      content: " v";
      color: red;
      display: inline-block;
      transform: rotate(8deg);
      font-size: 26px;
      color: $neon-green;
      transition: transform .3s;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner">
  <button data-target="#data-nav-0" data-toggle="collapse" data-state="show" class="list-header major no-style"> <span>HEADER</span> </button>
  <div class="col-wrapper collapse in major-content" id="data-nav-0">
    <div class="column">
      <ul class="list-unstyled">

        <li class="list-header"><a href="#" class="link">link</a></li>
        <li class="list-header desktop"><a href="#">head</a></li>
        <li class="mobile chevron-right" data-target="#data-inner-0-0" data-toggle="collapse" data-state="hide">
          <button class="no-style sub-header">This should toggle the ul links</button>
        </li>
        <li class="mobile-content">
          <ul class="inner collapse" id="data-inner-0-0">
            <li><a href="#" class="link">link</a></li>
            <li><a href="#" class="link">link</a></li>
            <li><a href="#" class="link">link</a></li>
            <li><a href="#" class="link">link</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="column">
      <ul class="list-unstyled">
        <li class="list-header desktop"><a href="#">Link</a></li>
        <li class="mobile chevron-right" data-target="#data-inner-0-1" data-toggle="collapse" data-state="hide">
          <button class="no-style sub-header">This should toggle the ul links</button>
        </li>

        <li class="mobile-content">
          <ul class="inner collapse" id="data-inner-0-0">
            <li><a href="#" class="link">link</a></li>
            <li><a href="#" class="link">link</a></li>
            <li><a href="#" class="link">link</a></li>
            <li><a href="#" class="link">link</a></li>
          </ul>
        </li>
      </ul>
      </ul>
    </div>
  </div>
</div>

<div class="inner">
  <button data-target="#data-nav-0" data-toggle="collapse" data-state="show" class="list-header major no-style"> <span>HEADER</span> </button>
  <div class="col-wrapper collapse in major-content" id="data-nav-0">
    <div class="column">
      <ul class="list-unstyled">

        <li class="list-header"><a href="#" class="link">link</a></li>
        <li class="list-header desktop"><a href="#">head</a></li>
        <li class="mobile chevron-right" data-target="#data-inner-0-0" data-toggle="collapse" data-state="hide">
          <button class="no-style sub-header">This should toggle the ul links</button>
        </li>

        <li class="mobile-content"><ul class="inner collapse" id="data-inner-0-0">
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
        </ul></li>
      </ul>
    </div>
    <div class="column">
      <ul class="list-unstyled">
        <li class="list-header desktop"><a href="#">Link</a></li>
        <li class="mobile chevron-right" data-target="#data-inner-0-1" data-toggle="collapse" data-state="hide">
          <button class="no-style sub-header">This should toggle the ul links</button>
        </li>

        <li class="mobile-content"><ul class="inner collapse" id="data-inner-0-0">
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
        </ul></li>
      </ul>
      </ul>
    </div>
  </div>
</div>

在旁注中，我将嵌套的ul元素包裹在li个元素中，以使其成为有效的HTML。