1

ナビゲーションの下にコンテンツを公開するためにjQueryスライドショーを使用しているナビゲーションがあります。別のナビゲーション項目をクリックすると div がトグルするようになりましたが、同じナビゲーション項目をクリックして閉じると、タブが閉じて再び開きます。今のところ閉じているdivの中に閉じるボタンがあります。

開いた div を閉じるにはどうすればよいですか >

例へのリンクはこちら

私のjQueryは次のとおりです。

(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);

そして私は発砲しています：

$(document).ready(function(){

    $('.show_hide').showHide({           
        speed: 300,  // speed you want the toggle to happen 
        easing: '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
        changeText: 0, // if you dont want the button text to change, set this to 0
        showText: 'View',// the button text to show when a div is closed
        hideText: 'Close' // the button text to show when a div is open
    }); 

});
4

2 に答える 2

0

トリックを実行するクラスを追加するだけで、$（'。toggleDiv'）セレクターを使用してすべてのdivで余分な操作を回避できます。

最も簡単なのは、toggleDivが表示されているかどうかを確認することです。'display'プロパティをnoneからblockに変更するだけで、役に立ちます。

単純な$（this）.addClass（'opened_div'）;を使用します。divを開き、後で削除します。

于 2012-10-22T10:07:00.910 に答える
0

クリックするとすべての div が上にスライドします。つまり、現在開いている div も上にスライドします。

$('.toggleDiv').slideUp(options.speed, options.easing);

私がお勧めするのは、開いた div に「is_open」のようなクラスを与えることです。これは、別の div を開くときに削除します。他のロジックを実行する前に、クリック時にクラスを確認できます。

if($(this).hasClass('is_open')) return;
于 2012-10-22T09:38:49.330 に答える