1

タグをクリックするとdivが表示されるように、divを切り替えようとしています。別の a タグをクリックすると、表示されている div が div に置き換わります。

これが私がしたことです。

HTML:

<a href="#" rel="#slidingDiv">a</a><br>
<a href="#" rel="#slidingDiv_2">b</a><br>
<a href="#" rel="#slidingDiv_3">c</a><br>
<a href="#" rel="#slidingDiv_4">d</a><br>

<div id="slidingDiv">a</div>
<div id="slidingDiv_2">a</div>
<div id="slidingDiv_3">a</div>
<div id="slidingDiv_4">a</div>

Jクエリ:

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

                var toggleDiv;

                var $divA = $('#slidingDiv'),
                    $divB = $('#slidingDiv_2'),
                        $divC = $('#slidingDiv_3'),
                        $divD = $('#slidingDiv_4'),
                        $divE = $('#slidingDiv_5'),
                        $divF = $('#slidingDiv_6'),
                        $divG = $('#slidingDiv_7'),
                        $divH = $('#slidingDiv_8'),
                        $divI = $('#slidingDiv_9');

                if( $divA.is( ':visible' ) ){
                        $divA.hide();
            }
                if( $divB.is( ':visible' ) ){
                        $divB.hide();
            }
                if( $divC.is( ':visible' ) ){
                        $divC.hide();
            }
                if( $divD.is( ':visible' ) ){
                        $divD.hide();
            }
                if( $divE.is( ':visible' ) ){
                        $divE.hide();
            }
                if( $divF.is( ':visible' ) ){
                        $divF.hide();
            }
                if( $divG.is( ':visible' ) ){
                        $divG.hide();
            }
                if( $divH.is( ':visible' ) ){
                        $divH.hide();
            }
                if( $divI.is( ':visible' ) ){
                        $divI.hide();
            }

                // this reads the rel attribute of the button to determine which div id to toggle
                toggleDiv = $(this).attr('rel'); 


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

                // this var stores which button you've clicked
      var toggleClick = $(this);

          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==0){
              //$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
               //}

          });

      return false;

    });

};
})(jQuery);

これは現在機能していますが、if ステートメントを使用する代わりに、これをより適切に実行できることを知っています。

ありがとう

4

2 に答える 2

4

どうぞ: http://jsfiddle.net/fqK36/5/

関数全体は次のようになります。

$.fn.showHide = function (options) {

    //default vars for the plugin
    var defaults = {
        speed: 1000,
        easing: '',
        changeText: 0,
        showText: 'Show',
        hideText: 'Hide',
        slideDiv: '.slide-div'
    };
    var options = $.extend(defaults, options);

    return this.each(function () {
        $(this).click(function () {
            $(options.slideDiv).hide();
            // this var stores which button you've clicked
            var toggleClick = $(this),
                toggleDiv = $(this).data('slide-id');
            // 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==0){
                //$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
                //}

            });


        });

    });

};

次に、次のように使用できます。

$('a').showHide({'slideDiv' : '.slide-div'});

このslideDivオプションは、スライドさせたい div で使用しているカスタム セレクターにすることができます。

すべてのスライドにはクラスが割り当てられているため、一度にすべてを非表示にすることができます。div次に、クリックされたリンクのdata-slide-id属性を取得することで、ターゲットを表示できます。

于 2013-04-23T14:52:21.333 に答える
0

通常、hiddenクラスを作成してこれを行います。新しい div に切り替えるときは、次のようなことができます。

$(this).click(function(){
    $(this).removeClass('hidden') 

    $('div:not(#' + $(this).attr('id') + ')').addClass('hidden')
});

これはnotセレクターを使用して、現在のアイテム以外のすべてを検索します。アニメーションなし、これが簡単な方法です。を使用して非表示になっていないものをすべて取得$('div:not(.hidden)')し、そのセレクターのすべてでトグルを実行することもできます。

$(this).click(function(){

    if($(this).hasClass('hidden'){
        $(this).show()

        $(this).removeClass('hidden')
    }

    $('div:not(#' + $(this).attr('id') + ') :not(.hidden.)')
        .hide().addClass('hidden')
});

物事を少しきれいにするのに役立つかもしれません。

于 2013-04-23T14:56:45.117 に答える