Question

我正在尝试使用font awesome set切换为下拉列表创建动态切换。这是我的HTML：

<div id="contis" class="row">
    <div class="container contis">
        <div class="minispc"></div>

        <a href="#service1" data-toggle="collapse"><i class = "fas fa-chevron-right"></i> Service 1</a>
        <div class="col">
        <div class="row">
            <div class="col">
            <div class="collapse" id = "service1">
                <li>Item 1</li>
                <li>Item 2</li>
            </div>
            </div>
        </div>
        </div>

    </div>
</div>

和我到目前为止的js：

$('contis > a').click(function() {
    $('i', this).toggleClass('fa-chevron-right fa-chevron-down');
});

然而，当我点击它时，没有任何反应。知道为什么吗？

Answer 1

问题在于选择器。添加#：

$('#contis a').click(function() {
    $('i', this).toggleClass('fa-chevron-right fa-chevron-down');
});

您拥有的选择器是一个名为contis的标记选择器，它选择了<contis>而不是id="contis"。对于id选择器，您需要使用#contis，这将选择正确的选择。

此外，没有直接的后代，所以删除>。

<强>段

$(function () {
  $('#contis a').click(function() {
    $('i', this).toggleClass('fa-chevron-right fa-chevron-down');
  });
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contis" class="row">
  <div class="container contis">
    <div class="minispc"></div>
    <a href="#service1" data-toggle="collapse"><i class="fa fa-chevron-right"></i> Service 1</a>
    <div class="col">
      <div class="row">
        <div class="col">
          <div class="collapse" id="service1">
            <li>Item 1</li>
            <li>Item 2</li>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

请将class从fas更改为fa。

在锚内部切换类

1 个答案: