Question

更新

我发现我可以点击

切换数据状态

$(".list-header").attr("data-state", $(".list-header").hasClass('list-header') ? "hide" : "show");

但是，当我单击刚刚打开的相同标题时，它不会恢复到原始图标或“隐藏”状态。

如何将当前标头切换回data-state =“hide”状态？

$('.list-header.major').click(function(){
$(".list-header").attr("data-state", $(".list-header").hasClass('list-header') ? "hide" : "show");
$('.list-header.major').next('div').slideUp();
  $(this).next('div').toggle();
  $('.list-header.major').removeClass('active');
  $(this).toggleClass('active');
  return false;
});

=============================================== ============================

我需要能够切换“HEADER”，以便当subnav为其中任何一个关闭时，标题图标始终设置为+符号，并且{{1} }

我发现标题的状态始终设置为有效，并且切换data-state=hide或+符号的唯一方法是从{{1}切换- } data-state，基于show类hide的状态.col-wrapper或style。

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

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

这是关闭状态

这是开放状态 请注意，data-state类有.list-header来显示子空间，但.col-wrapper类仍设置为display:block，这样可以防止标题切换回正确的状态。

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

.col-wrapper

HTML

display:none

的jQuery

$(".list-header").on('click', function(){
    if($(this).find(".col-wrapper").css("display", "none")){
      force data-state to be hide
    }
});

CSS

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

使用屏幕截图和更多详细信息进行更新

顶部导航应该有$('.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; });图标，而不是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; }。在这里，您可以看到第二个标题已打开并且具有正确的+，而其上方的标题仍然包含-，但内容-已在其下方展开：

Answer 1

与问题的作者一起更改了代码。应该按预期工作。

$('.list-header.major').click(function(){
if (current !== this)
    $(current).attr('data-state', 'hide');
$(this).attr("data-state", $(this).attr('data-state') === 'hide' ? "hide" : "show");
current = this;
$('.list-header.major').next('div').slideUp();
  $(this).next('div').toggle();
  $('.list-header.major').removeClass('active');
  $(this).toggleClass('active');
  return false;
});

这是fiddle

定位数据状态以切换导航标头

1 个答案: