0

div を表示および非表示にするこの jQuery プラグインをオンラインで見つけました。1 つの要因を除いて、それは私のサイトに最適です。見出しをクリックすると、対応する div が表示されます。ただし、別の見出しをクリックするまで、その div は消えません。以下のコードを微調整して、同じ見出しをもう一度クリックすると、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 () {
// optionally add the class .toggleDiv to each div you want to automatically close
                  $('.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);
4

3 に答える 3

1

これを試して：

$(this).click(function() {
    var toggleClick = $(this);
    var toggleDiv = $(this).attr('rel');
    var isDivVisible = $(toggleDiv).is(":visible");
    $('.toggleDiv').slideUp(options.speed, options.easing);

    if (!isDivVisible) {
        $(toggleDiv).slideToggle(options.speed, options.easing, function() {
            if (options.changeText == 1) {
                $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
            }
        });
    }
    return false;

});​
于 2012-06-22T15:02:05.727 に答える
0

divの状態を確認し、それに応じて表示/非表示にするだけです

http://jsfiddle.net/psLYW/1/

于 2012-06-22T15:01:00.580 に答える
0

私が言えることから、あなたは要素の状態を表示から非表示に（そして再び元に戻す）切り替えようとしているのですか？

表示/非表示だけにしたい場合は、jQueryのすばらしい.slideToggle()メソッドが役立つかもしれません。

//  Your elements. Change these!
var link = $('.yourLink');
var target = $('.yourDiv');

//  Showing/hiding
link.click(function() {
    target.toggleSlide();
    return false;
});

toggleそうでない場合は、この関数を使用して、次の2つのカスタムコールバックを使用することをお勧めします。

//  Your elements. Change these!
var link = $('.yourLink');
var target = $('.yourDiv');

link.toggle(function() {
    //  Animate showing
    !target.is(':animated') && target.slideDown().text('how do you do?');
    return false; // stop the default link functionality
}, function() {
    //  Animate hiding
    !target.is(':animated') && target.slideUp().text('see you later, alligator');
    return false;
});

リンク： http： //api.jquery.com/toggle/ http://api.jquery.com/slideToggle/

于 2012-08-18T15:09:37.727 に答える