时间戳

首页 > 解决方案 > 使用 i 标签而不是下拉按钮的背景属性来切换效果

jquery - 使用 i 标签而不是下拉按钮的背景属性来切换效果

问题描述

我对不需要 JS 的下拉菜单感兴趣。我在网上找到了一些资源并成功了。但是，我想通过 i 标签（或任何更好的建议）更改我用作下拉“按钮”的图像，以便我可以改用 font-awesome/line-awesome 类（获取 .svg 需要付费许可我所知）。

我不知道如何处理输入：选中 ~ 标签以更改为关闭图标，如果选择

<label for="dropOptsPost"><i class="fa fa-ellipsis-v"></i></label>

.dropdown label {
  display: block;
  cursor: pointer;
  background: url(img/closed.png) no-repeat left center;
  padding: 3rem 0 3rem 8rem;
}

/* Toggle effect */
input:checked ~ label {
  background: url(img/open.png) no-repeat left center;
}

input:checked ~ .dropdown-content {
  max-height: 100%;
}
<div class="dropdown drop-container">
      <input type="checkbox" id="dropdownMenu">
      <label for="dropdownMenu"></label>
      <div class="dropdown-content">
        <a href="#" title="">Option 1</a>
        <a href="#" title="">Option 2</a>
        <a href="#" title="">Option 3</a>
      </div>
    </div>

更新 请参阅下面的类似示例中的我的解决方案

标签： jquerycsstogglefont-awesome

解决方案

$(document).ready(function() {
  $('.toggle').click(function() {
    $(this).find('.toggle-icon').toggleClass('fa-plus-circle fa-times active');
    $('.toggle').toggleClass('active');
    $('.toggle-content').toggleClass('active');
  });
});
.hidden {
  overflow: hidden;
}

.container {
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  background-color: #eee;
}

.wrapper {
  background-color: pink;
  position: relative;
  display: flex;
  align-items: center;
}

.toggle {
  display: block;
  width: 20px;
  height: 20px;
  float: left;
  cursor: pointer;
  color: white;
  text-align: center;
  background-color: green;
  margin: 10px;
}

.toggle-icon {
  color: white;
  font-size: 10px;
  text-align: center;
}

.toggle.active {
  background-color: red;
}

.toggle-content {
  display: none;
}

.toggle-content.active {
  display: block;
  background-color: white;
  border: 1px solid black;
  position: absolute;
  top: 40px;
  left: 0;
}
<div class="container">
  <div class="wrapper">
    <div class="toggle"><a href="javascript:void"><i class="toggle-icon fas fa-cogs"></i></a></div>
    <div class="toggle-content">
      <p>Some content</p>
    </div>
  </div>
</div>

推荐阅读