Question

我正在尝试创建一个链接，一旦你点击它解锁文本。

我想我几乎就在那里，但我不知道如何显示隐藏的文字，以下是我目前所拥有的。如果有人可以指出我的方向是正确的。

HTML

<section id="container">
    <p>Click to show content. <a href="#" id="tweetLink">Tweet Me.</a></p>
    <p class="hidden-text">Locked</p>
</section>

JS

(function ($) {

    var win = null;

    $.fn.tweetAction = function (options, callback) {



        options = $.extend({
            url: window.location.href
        }, options);

        return this.click(function (e) {

            if (win) {

                e.preventDefault();
                return;
            }

            var width = 550,
                height = 350,
                top = (window.screen.height - height) / 2,
                left = (window.screen.width - width) / 2;

            var config = [
                'scrollbars=yes', 'resizable=yes', 'toolbar=no', 'location=yes',
                'width=' + width, 'height=' + height, 'left=' + left, 'top=' + top
            ].join(',');

           win = window.open('http://twitter.com/intent/tweet?'+$.param(options),
                    'TweetWindow',config);

            // Checking whether the window is closed every 100 milliseconds.
            (function checkWindow() {

                try {


                    if (!win || win.closed) {
                        throw "Closed!";
                    }
                    else {
                        setTimeout(checkWindow, 100);
                    }
                }
                catch (e) {

                    win = null;
                    callback();
                }

            })();

            e.preventDefault();
        });
    };

})(jQuery);

JS

$(document).ready(function(){

$('#tweetLink').tweetAction({
    text:       'First tweet',
    url:        '#',
    via:        'website'
},function(){


    $('hidden-text')
    {
        // action here

    }

});

});

Answer 1

<强> JS

// to show an element that's hidden, you can use .show() or just remove the class

// option 1:
$(".hidden-text").show();

// option 2:
$(".hidden-text").removeClass("hidden-text");

<强> CSS

.hidden-text {
  display: none;
}

Answer 2

$('#tweetLink').click(function(){ $('.hidden-text').slideToggle(); })

每次点击链接时，这都会显示和隐藏段落

如果你只想要使用.show（）。或.slideUp（如果你想要一些效果）而不是.slideToggle

<强> CSS 确保你的hiddent-text类有一个display：none CSS属性。而不是隐藏的可见性

Twitter喜欢功能：点击显示隐藏文字

2 个答案: