Question

$(".myButton").click(function () {

    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = { direction: $('left').val() };

    // Set the duration (default: 400 milliseconds)
    var duration = 1000;

    $('#myDiv').toggle(effect, options, duration);
});

我想知道当切换到“少读”时，我可以切换按钮以显示新按钮或文本副本

<center>
<button id="button" class="myButton">Read More</button>
</center>

<div id="myDiv">
<p>Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom.</p>
</div>

Answer 1

$(".myButton").click(function () {
    var self = $(this);
    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = { direction: $('left').val() };

    // Set the duration (default: 400 milliseconds)
    var duration = 1000;

    $('#myDiv').toggle(effect, options, duration, function() {
        if (self.text() == "Read More") {
            self.text('Read Less');
        } else {
            self.text('Read More');
        }
    });
});

FIDDLE

切换时jQuery UI幻灯片切换更改按钮

1 个答案: