JS:滑开多个div

时间:2013-07-10 02:14:57

标签: javascript

所以我找到了一个脚本来滑动打开多个div但我似乎无法让它工作。我认为我的主页面出了问题,但是我创建了一个单独的页面,但似乎无法让它工作。

调试器中没有消息,没有错误;但是DIV没有出现。

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type='text/javascript'>
(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);

</script>
<a class="show_hide" href="#" rel="#slidingDiv">View</a></pre>
<div id="slidingDiv" class="toggleDiv" style="display: none;">Fill this space with really interesting content.</div>

1 个答案:

答案 0 :(得分:1)

对我而言,这是有效的。实际上,你忘了调用函数showHide(),你可以这样做:

$(document).ready(function() {
$('.show_hide').showHide();


});

http://jsbin.com/amuhom/1/edit

我已经添加了一个div和一个按钮。我想这是预期的行为?