代码之家 › 专栏 › 技术社区 › Houy Narun

如何将可折叠字体图标附加到嵌套列表的父li?

css jquery javascript

Houy Narun · 技术社区 · 7 年前

我有一个幻灯片切换嵌套列表 <li>

$(function() {
  $('body').on('click', function(e) {
    var element = $(e.target);

    if (element.is('li') == true && element.children('ol').children('li').length >= 1) {
      e.stopPropagation();
      $(e.target).children('ol').slideToggle(function() {});
    }
  })
})

ol.example li {
  display: block;
  margin: 10px 5px;
  padding: 11px;
  border: 1px solid #cccccc;
  color: #0088cc;
  background: #eeeeee;
  cursor: pointer;
}

ol.example ol {
  display: none;
}

ol.example li a:before {
  content: "\f054";
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ol class="example">
  <li><a href="JavaScript:void(0)" style="visibility: visible;">Account</a>
    <ol>
      <li><a href="JavaScript:void(0)" style="visibility: visible;">Account</a></li>
      <li><a href="JavaScript:void(0)" style="visibility: visible;">Account Statement</a></li>
      <li><a href="JavaScript:void(0)" style="visibility: visible;">Account Closure</a></li>
      <li><a href="JavaScript:void(0)" style="visibility: visible;">Internal Account</a></li>
    </ol>
  </li>
  <li><a href="JavaScript:void(0)" style="visibility: visible;">User</a>
    <ol>
      <li><a href="JavaScript:void(0)" style="visibility: visible;">User Management</a>
        <ol>
          <li><a href="JavaScript:void(0)" style="visibility: visible;">Reset User Password</a></li>
          <li><a href="JavaScript:void(0)" style="visibility: visible;">Role and Right</a></li>
        </ol>
      </li>
      <li><a href="JavaScript:void(0)" style="visibility: visible;">List Logged-in User</a></li>
      <li><a href="JavaScript:void(0)" style="visibility: visible;">User</a></li>
    </ol>
  </li>
  <li><a href="JavaScript:void(0)" style="visibility: visible;">LogOut</a></li>
</ol>

<李>

有什么CSS或Javascript方法可以达到这种效果吗?

3 回复 | 直到 7 年前

Yash009 7 年前

您可以使用CSS内容来实现这一点。使用伪选择器添加类toggle tab plus和toggle tab minus(位于范围内,因为您希望它们位于同一行中)。并在切换时切换它们。如果你想让小图片看起来像某个特定的东西,你也可以在内容中使用小图片。我用这种技术在这个网站上做左导航。我用“x”代替“-”来折叠,用“+”来展开。 https://www.simplystamps.com/address-stamps/view-all 下面是上面例子中的js提琴。

Working js fiddle for the example above

<div>your Div<span class="toggle-tab-plus"></span></div>

/*css*/
    .toggle-tab-plus:before {
        content: "+";
    }
    .toggle-tab-minus:before {
        content: "-";
    }

Houy Narun 7 年前

.toggleClass() 详情如下:

$(function() {
  $('body').on('click', function(e) {
    var element = $(e.target);

    if (element.is('li') == true && element.children('ol').children('li').length >= 1) {
      e.stopPropagation();
      $(e.target).children('ol').slideToggle(function() {
        $(e.target).closest('li').find('a:first').toggleClass('red');
      });
    }
  })
})

ol.example li {
  display: block;
  margin: 10px 5px;
  padding: 11px;
  border: 1px solid #cccccc;
  color: #0088cc;
  background: #eeeeee;
  cursor: pointer;
}

ol.example ol {
  display: none;
}

ol.example li a:before {
  content: "\f054";
}

.red {
  color: red;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ol class="example">
  <li><a href="JavaScript:void(0)" style="visibility: visible;">Account</a>
    <ol>
      <li><a href="JavaScript:void(0)" style="visibility: visible;">Account</a></li>
      <li><a href="JavaScript:void(0)" style="visibility: visible;">Account Statement</a></li>
      <li><a href="JavaScript:void(0)" style="visibility: visible;">Account Closure</a></li>
      <li><a href="JavaScript:void(0)" style="visibility: visible;">Internal Account</a></li>
    </ol>
  </li>
  <li><a href="JavaScript:void(0)" style="visibility: visible;">User</a>
    <ol>
      <li><a href="JavaScript:void(0)" style="visibility: visible;">User Management</a>
        <ol>
          <li><a href="JavaScript:void(0)" style="visibility: visible;">Reset User Password</a></li>
          <li><a href="JavaScript:void(0)" style="visibility: visible;">Role and Right</a></li>
        </ol>
      </li>
      <li><a href="JavaScript:void(0)" style="visibility: visible;">List Logged-in User</a></li>
      <li><a href="JavaScript:void(0)" style="visibility: visible;">User</a></li>
    </ol>
  </li>
  <li><a href="JavaScript:void(0)" style="visibility: visible;">LogOut</a></li>
</ol>

刚刚接近我想要的状态,但我仍然无法将图标附加到切换的每个状态,刚才我使用了类 red

Pavish 7 年前

您需要正确指定字体系列以显示图标。只需对代码进行一次更改即可显示图标。

ol.example li a:before {
  font-family: "FontAwesome";
  content: "\f054";
}

https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use