Question

我目前的问题是，我终于取得了进一步的进展，但我无法改变它background-color和color并且文字说明了内容再次滑动后Hide。

我按下了一个显示内容的按钮，按钮上的文字显示为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

Answer 2

你可以尝试

     $('button funtion').on('click', function(event) {

                $('sample1').className;
                $('sample1').removeClassName('hidden');
                $('sample1').className;

                $('sample2').className;
                $('sample2').addClassName('hidden');
                $('sample2').className;

            });

Answer 3

我改变了一些你的代码以使它工作。 http://jsfiddle.net/fzgajurb/2/

基本上是一样的，但添加了一些线来使它工作。

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

希望它有所帮助。

Answer 4

试试这个：

＆＃13;

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

＆＃13;

	div.single_item {
	    background-color: #ffffff;
	    width: 270px;
	    height: auto;
	    padding: 10px;
	    margin: 7px 0 0 0;
	}
	div.single_item p {
	    padding: 0 9px;
	    font-size: 9pt;
	    display: none;
	}
	div.single_item button {
	    border: 0;
	    width: 50px;
	    height: 25px;
	    border-radius: 20px;
	    background-color: #EEE;
	    color: #BCBCBC;
	    font-weight: 600;
	    padding: 0px 0 0 0;
	    font-size: 8pt;
	    margin: -30px 0 15px 222px;
	    cursor: pointer;
	    position: absolute;
	}
	div.single_item button:hover {
	    background-color: #38B587;
	    color: #1B6145;
	}
	div.single_item button:focus {
	    outline: none;
	}
	div.single_item button div.active {
	    content:"Hide";
	    background-color: #38B587 !important;
	}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<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>

＆＃13;

onClick更改内容文本+类

4 个答案: