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>

查询：

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 回答