Question

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

我想知道这个网站的内容：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的{{1}}伪类中设置初始:after符号，而是要为其提供默认类{ {1}}和.flip。除此之外，类fa和fa-plus不是有效的FontAwesome类;使用fa-plus-circle和fa-minus-circle代替您的jQuery fa-plus。

请注意，现在该图标位于fa-minus上，而不是.toggleClass()，如果您想要横向居中，则需要.flip :after }。这也意味着您将width阻止滚动条...尽管您仍然希望在所有元素上使用此功能。

以下都可以看到：

＆＃13;

100%

＆＃13;

box-sizing: border-box

＆＃13;

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

＆＃13;

别忘了参考FontAwesome图书馆！

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

1 个答案: