切换 class 和可见性、显示

Question

如果我也想切换显示块：none。

我该怎么做

$('.exp').on('click', function() {
"use strict";
$(this).toggleClass("plus_sign minus_sign");    
$(this).toggleClass("plus01 minus01");
});

plus_sign和减号class各有一个图像来表示加号和减号。作为 classes 切换，如果 class 是 minus_sign 我希望显示减号图像。如果 class 是 plus_sign，我希望显示加号图像并隐藏减号图像。这些图像是 CSS.

中的背景图像

谢谢

Answer 1

你太难了。

首先，将所有 .exp 元素设置为使用加号（如果默认显示加号）。然后切换 class 以切换 class 以便显示减号。这是一些快速代码，应该可以帮助您...

$('.exp').on('click', function() {
    $(this).toggleClass('hide_plus');
});

您的 CSS 将是这样的：

.exp {
    background:url(/path/to/plus.gif);
}
.hide_plus {
    background:url(/path/to/minus.gif);
}

顺便说一句，您最好为这些图标使用 sprite，然后移动背景图像的位置。或者使用类似 fontawesome 的东西。

这是粗略的 fiddle，带有 +/- 切换，没有图像。添加图像应该不会太困难。

https://jsfiddle.net/tycahill/1pwbuvga/

Answer 2

它很简单你可以参考我的Plunker请检查这里我为你做了一个简单的

 $("#clickme").click(function(){
    $("#clickme").toggleClass("fa-minus");
});

和HTML

  <ul class="main-menu">

    <li data-ui-sref-active="active" class="cursor-pointer">
        <a data-ui-sref="dashboard.campaign" href="#/dashboard/campaign"><i class="fa fa-plus" aria-hidden="true" id="clickme"></i><span>click me </span></a>
    </li>      

</ul>

供参考http://plnkr.co/edit/fZ9AQCrO7RAK8wshQsQX?p=info

切换 class 和可见性、显示

toggle class and visibility, display

jquery

class

toggle