显示隐藏模块实现的几种方式

<style>
body {
    width: 400px;
    margin: 0 auto;
}
.btn {
    width:50%;
    height: 30px;
}
#box {
    width: 200px;
    height：100px;
    background-color: red;
    overflow: hidden;
}
</style>

<button id="btn-show" class="btn">显示</button>
<button id="btn-hide" class="btn">隐藏</button>
<div id="box" class=""> </div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<style>

body {

width: 400px;

margin: 0 auto;

}

.btn {

width:50%;

height: 30px;

}

#box {

width: 200px;

height：100px;

background-color: red;

overflow: hidden;

}

</style>

//函数的定义
var silent = {
    show: function ($elem) {
        $elem.html('<p>我要显示了</p>');
        $elem.show();
        setTimeout(function () {
            $elem.html($elem.html() + '<p>我已经显示了</p>');
        }, 1000)
    },
    hide: function ($elem) {
        $elem.hide();
    }
};
//函数的执行
var $box = $('#box');
$('#btn-show').on('click', function () {
    silent.show($box);
});
$('#btn-hide').on('click', function () {
    silent.hide($box);
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

//函数的定义

var silent = {

show: function ($elem) {

$elem.html('<p>我要显示了</p>');

$elem.show();

setTimeout(function () {

$elem.html($elem.html() + '<p>我已经显示了</p>');

}, 1000)

},

hide: function ($elem) {

$elem.hide();

}

};

//函数的执行

var $box = $('#box');

$('#btn-show').on('click', function () {

silent.show($box);

});

$('#btn-hide').on('click', function () {

silent.hide($box);

});

var silent = {
    show: function ($elem, showCallback, shownCallback) {
        if (typeof showCallback === 'function') showCallback();
        $elem.show();
        if (typeof shownCallback === 'function') shownCallback();
    },
    hide: function ($elem) {
        $elem.hide();
    }
};

var $box = $('#box');
$('#btn-show').on('click', function () {
    silent.show($box, function () {
        $box.html('<p>我要显示了</p>');
    }, function () {
        setTimeout(function () {
            $box.html($box.html() + '<p>我已经显示了</p>');
        }, 1000)
    });
});
$('#btn-hide').on('click', function () {
    silent.hide($box);
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

var silent = {

show: function ($elem, showCallback, shownCallback) {

if (typeof showCallback === 'function') showCallback();

$elem.show();

if (typeof shownCallback === 'function') shownCallback();

},

hide: function ($elem) {

$elem.hide();

}

};

var $box = $('#box');

$('#btn-show').on('click', function () {

silent.show($box, function () {

$box.html('<p>我要显示了</p>');

}, function () {

setTimeout(function () {

$box.html($box.html() + '<p>我已经显示了</p>');

}, 1000)

});

$('#btn-hide').on('click', function () {

silent.hide($box);

});

var silent = {
    inti:function($elem){
        if($elem.is(':hidden')){
            $elem.data('status','hidden');
        }else{
            $elem.data('status','shown');
        }
    },
    show: function ($elem) {
        if ($elem.data('status') === 'show') return;
        if ($elem.data('status') === 'shown') return;
        $elem.data('status','show').trigger('show'); //绑定状态,阻止连续点击带来的资源浪费
        $elem.show();
        $elem.data('status','shown').trigger('shown');
    },
    hide: function ($elem) {
        $elem.data('status','hide').trigger('hide');
        $elem.hide();
        $elem.data('status','hidden').trigger('hidden');
    }
};

//触发事件
var $box = $('#box'); 
silent.inti($box);
$('#btn-show').on('click',function () {
    silent.show($box);
});

//小A同学对事件绑定的时间
$box.on('show shown hide hidden',function(e){
    if(e.type === 'show'){
        $box.html('<p>我要显示了</p>');
    }else if(e.type === 'shown'){
        setTimeout(function () {
            $box.html($box.html() + '<p>我已经显示了</p>');
        }, 1000);
    }
});
$('#btn-hide').on('click', function () { 
    silent.hide($box);
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

var silent = {

inti:function($elem){

if($elem.is(':hidden')){

$elem.data('status','hidden');

}else{

$elem.data('status','shown');

}

},

show: function ($elem) {

if ($elem.data('status') === 'show') return;

if ($elem.data('status') === 'shown') return;

$elem.data('status','show').trigger('show'); //绑定状态,阻止连续点击带来的资源浪费

$elem.show();

$elem.data('status','shown').trigger('shown');

},

hide: function ($elem) {

$elem.data('status','hide').trigger('hide');

$elem.hide();

$elem.data('status','hidden').trigger('hidden');

}

};

//触发事件

var $box = $('#box');

silent.inti($box);

$('#btn-show').on('click',function () {

silent.show($box);

});

//小A同学对事件绑定的时间

$box.on('show shown hide hidden',function(e){

if(e.type === 'show'){

$box.html('<p>我要显示了</p>');

}else if(e.type === 'shown'){

setTimeout(function () {

$box.html($box.html() + '<p>我已经显示了</p>');

}, 1000);

}

});

$('#btn-hide').on('click', function () {

silent.hide($box);

});