扩展div容器时单击更改图标

Question

我正在使用W3Schools的指南测试/调整Jquery slideToggle。我想在展开divPanel时将+图标更改为 - 图标。有人可以引导我纠正路径。

我想知道在这个网站上的东西：http://www.serenahotels.com/en/default.html

$(document).ready(function(){
    $(".flip").click(function(){
        $(".panel").slideToggle("normal");
        $(".flip").toggleClass('fa-plus-circle fa-minus-circle')
    });
});

.panel, .flip {
    padding: 2px;
    text-align: center;
}

.flip:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    margin-left: 5px;
}


.panel {
    padding: 10px;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel">I am hidden.</div>
 
<div class="flip"></div>

Answer 1

您似乎试图切换FontAwesome图标。不要在plus的:after伪类中设置初始.flip符号，而是要给它一个默认类fa和fa-plus。除此之外，类fa-plus-circle和fa-minus-circle不是有效的FontAwesome类;使用fa-plus和fa-minus代替你的jQuery .toggleClass()。

请注意，现在图标在.flip而不是在:after上，如果你想要水平居中它，你需要给它一个width的100%。这也意味着你将box-sizing: border-box防止滚动条...尽管你仍然希望你的所有元素。

这一切都可以在以下内容中看到：

$(document).ready(function() {
  $(".flip").click(function() {
    $(".panel").slideToggle("normal");
    $(".flip").toggleClass('fa-plus fa-minus')
  });
});

* {
  box-sizing: border-box;
}

.panel,
.flip {
  padding: 2px;
  text-align: center;
  width: 100%;
}

.panel {
  padding: 10px;
  display: none;
}

<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 class="panel">I am hidden.</div>

<div class="flip fa fa-plus"></div>

不要忘记参考FontAwesome库！