jquery - 关于 Jquery 显示/隐藏

Question

我正在尝试调整此脚本，以便一旦您单击图像，它会拉下另一个 div，然后一旦您单击另一个，它就会带来该信息，而不是两者等。

(function ($) {
    $.fn.showHide = function (options) {
        //default vars for the plugin
        var defaults = {
            speed: 1000,
            easing: '',
            changeText: 0,
            showText: 'Show',
            hideText: 'Hide'
        };
        var options = $.extend(defaults, options);
        $(this).click(function () {
            $('.toggleDiv').slideUp(options.speed, options.easing);
            // this var stores which button you've clicked
            var toggleClick = $(this);
            // this reads the rel attribute of the button to determine which div id to toggle
            var toggleDiv = $(this).attr('rel');
            // here we toggle show/hide the correct div at the right speed and using which easing effect
            $(toggleDiv).slideToggle(options.speed, options.easing, function () {
                // this only fires once the animation is completed
                if (options.changeText == 1) {
                    $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
                }
            });
            return false;
        });
    };
})(jQuery);

请指教。感谢http://papermashup.com/simple-jquery-showhide-div/

Answer 1

看看 jQuery切换事件处理程序，它允许您将两个函数绑定到元素，并在交替单击时执行它们。这样，您就不必跟踪您正在进行的点击、您是否可见等。

简而言之，您将使用处理程序替换您click的处理toggle程序，该处理程序将具有两个功能：

    $(this).toggle(function () {
        //what to do when your element is in its initial state
    }, function() {
        //what to do when your element is in its "clicked once" state
    }