Riucc's Storage :: [JQuery] - 보이게 안보이게 : show(), hide()

[JQuery] - 보이게 안보이게 : show(), hide()

JQuery&Javascript2019. 5. 3. 14:05

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

○ 보이게 안보이게 : show(), hide()

- 보이게 안보이게 : show(), hide()

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
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
 
<body>
    <div class ="btn btn-success" id="toggle">더보기</div>
    <div id="menu" style="display:none;">
        <ul>
            <li>메뉴1</li>
            <li>메뉴2</li>
            <li>메뉴3</li>
        </ul>
    </div>
 
    <script type="text/javascript">
        $(document).ready(function () {
            $('#toggle').click(function () {
                // state 변수에 id가 menu인 요소의 display의 속성을 가져옴
                var state = $('#menu').css('display'); 
                // state가 none 상태일경우
                if (state == 'none') {
                    $('#menu').show();
                } else {
                    $('#menu').hide();
                }
            });
        });
    </script>
</body>
Colored by Color Scripter
cs

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
44
45
46
47
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
 
<body>
    <select id="displayselect">
        <option value="1">show/hide</option>
        <option value="2">slide</option>
        <option value="3">fade</option>
    </select>
 
    <input type="button" id="showbtn" value="보여주기">
    <input type="button" id="hidebtn" value="숨기기">
    <div style="display: none;" id="displaydiv">
        <ul>
            <li>초기 숨겨져 있는 화면1</li>
            <li>초기 숨겨져 있는 화면2</li>
            <li>초기 숨겨져 있는 화면3</li>
            <li>초기 숨겨져 있는 화면4</li>
        </ul>
    </div>
 
 
    <!-- show(), slideDown(), fadeIn(), hide(), slideUp(), fadeOut() -->
    <script type="text/javascript">
        $(function () {
            $('#hidebtn').click(function () {
                if ($('#displayselect').val() == 1) {
                    $('#displaydiv').hide();
                } else if ($('#displayselect').val() == 2) {
                    $('#displaydiv').slideUp();
                } else if ($('#displayselect').val() == 3) {
                    $('#displaydiv').fadeOut();
                }
            });
 
            $('#showbtn').click(function () {
                if ($('#displayselect').val() == 1) {
                    $('#displaydiv').show();
                } else if ($('#displayselect').val() == 2) {
                    $('#displaydiv').slideDown();
                } else if ($('#displayselect').val() == 3) {
                    $('#displaydiv').fadeIn();
                }
            });
 
        });
    </script>
</body>
Colored by Color Scripter
cs

저작자표시 (새창열림)

'JQuery&Javascript' 카테고리의 다른 글

[JQuery] - 태그 속성 값 가져오기 : attr() (0)	2019.05.03
[JQuery] - 공백 제거 : trim() (0)	2019.05.03
[JQuery] - 셀렉터 : parent(), children(), find(), prev(), next() (0)	2019.05.03
[JQuery] - change() 이벤트로 select 이벤트 처리하기 (0)	2019.05.03
[JQuery] - 태그들을 id, class, name 으로 값 찾아오기 (0)	2019.05.03

최근 등록 현황

달력

일	월	화	수	목	금	토
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

카운터

[JQuery] - 보이게 안보이게 : show(), hide()

'JQuery&Javascript' 카테고리의 다른 글

최근 글

최근 월별 글

최근 댓글

최근 글

최근 월별 글

최근 댓글

최근 글

최근 월별 글

최근 댓글

지난달

2025.6

다음달

티스토리툴바