Question

我有一个以这种方式显示的常见问题列表：问题和按钮“看到答案”。

当点击“看到答案”时，它立即变得“接近”。

我的问题是，当点击“关闭”时，我无法撤消它。它应该再次成为“看到答案”按钮。

这是html

<p class="faq-question">Question</p>
<div class="collapse js-faq-answer" id="collapseExample">
    <div class="well">
        Answer
    </div>
</div>
<a class="btn btn-primary js-faq-button" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">See the answer</a>

这是我的剧本

$(document).ready(function() {
    $('.js-faq-button').click(function(){
        if(this.click){
            $(this).addClass('js-faq-button-clicked');
            $(this).removeClass('js-faq-button');
            $('.js-faq-button-clicked').html('Close');
        }
        else{
            $(this).addClass('js-faq-button');
            $(this).removeClass('js-faq-button-clicked');
            $('.js-faq-button-clicked').html('See the answer');
        }
    });
});

Answer 1

我只需将js-faq-button点击添加为一个类，然后切换它。

$(document).ready(function(){
    $('.js-faq-button').on('click',function(){
        var self = $(this);
        self.toggleClass('js-faq-button-clicked');
        if(self.hasClass('js-faq-button-clicked')) {
            self.html('Close');
        }
        else {
            self.html('See the answer');
        }
    });
});

Answer 2

您的情况不正确。我要检查按钮是否有js-faq-button-clicked类。如果不添加，如果是，请将其删除。

这不是唯一的方法，但它肯定会奏效。

$(document).ready(function() {
    $('.js-faq-button').click(function(){
        if(!$(this).hasClass("js-faq-button-clicked")){
            $(this).addClass('js-faq-button-clicked');
            $(this).removeClass('js-faq-button');
            $('.js-faq-button-clicked').html('Close');
        }
        else{
            $(this).addClass('js-faq-button');
            $(this).removeClass('js-faq-button-clicked');
            $('.js-faq-button-clicked').html('See the answer');
        }
    });
});

Answer 3

还要尝试在if条件中检查按钮的值（即文本），而不仅仅是＆＃34; Click＆＃34;事件。目前你只是说＆＃34;点击，改为关闭＆＃34;。您需要让它知道在两个提示之间来回切换。

Answer 4

单击它时尝试检查其文本：如果是＆＃34;请参阅答案＆＃34;这将是＆com;关闭＆＃34;反之亦然

没有点击的按钮说'看'，点击按钮说'关闭'

4 个答案: