jquery - onClick 改变内容 text + class

Question

我现在的问题是，我终于取得了进一步的进展，但我无法让它改变它的 background-color 和 color 并且文字说隐藏内容再次向上滑动后

我有一个按钮，当您按下它时会显示内容，按钮上的文字显示为 Show 并且背景颜色为灰色，但是当您单击它时，它应该显示为带有绿色背景的隐藏.

jQuery

$(".portfolio_show_content").hide("slow");
    $(".portfolio_show").on('click', function() {
    $(".portfolio_show_content").hide();
    $(this).parent().find(".portfolio_show_content").slideToggle();
    $(this).html('Hide');
});

HTML

<div class="single_item">
    <h3>Standby overlay</h3><button class="right portfolio_show">Show</button>
    <p class="portfolio_show_content">This overlay comes in either basic or advanced, advanced includes animations and more styling-/effects.</p>
</div>

链接:jsFiddle

Answer 1

添加一个与您的 :hover 相同的事件类并切换该类和文本

$(".portfolio_show_content").hide("slow");

$(".portfolio_show").on('click', function () {
    var el  = $(this).parent().find(".portfolio_show_content").slideToggle(),
        el2 = $(this).html(function(_, htm) {
                return htm == 'Hide' ? 'Show' : 'Hide';
              }).toggleClass('active')

    $(".portfolio_show_content").not(el).hide();
    $(".portfolio_show").not(el2).removeClass('active')
});

FIDDLE