자바스크립트 질문 드려요

자바스크립트 질문 드려요

QA

자바스크립트 질문 드려요

본문

$(document).ready(function(){
    var window_h = $(window).height();
    var window_w = $(window).width();
    var header_h = $(".header").height();
    my_work_set();

    $(window).load(function(){
        window_h = $(window).height();
        window_w = $(window).width();
        header_h = $(".header").height();
        my_work_set();
    });
    $(window).resize(function(){
        window_h = $(window).height();
        window_w = $(window).width();
        header_h = $(".header").height();
        my_work_set();
    });

    function my_work_set(){
        $(".my_work .container").height(window_h-header_h);
    }

    var work_status;
    $(".my_work .container .work_list>ul>li .more").on("click", function(){
        work_status = $(this).parent().hasClass("open");
        if(work_status == true){
            $(this).parent().removeClass("open");
        }else{
            $(this).parent().addClass("open");
        }
    });

    $(".layer_pop .btn_close, .layer_pop_frame .btn_close, .layer_pop_bg").on("click", function(){
        $(".layer_pop").hide();
        $(".layer_pop_frame").hide();
        $(".layer_pop_bg").fadeOut(300);
        $("html, body").css({overflow : "visible", height : "auto"}).unbind('scroll touchmove mousewheel');
    });

    //검사실시에 탭 열고 닫기
    var cnt_status;
    $(".cnt_group .cnt_tit").on("click", function(){
        cnt_status = $(this).parent().hasClass("close");
        if(cnt_status == false){
            $(this).next().slideUp();
            $(this).parent().addClass("close");
        }else{
            $(this).next().slideDown();
            $(this).parent().removeClass("close");
        }
    });
    $(".chk_ready .cnt_tit, .chk_complete .cnt_tit").on("click", function(){
        cnt_status = $(this).hasClass("close");
        if(cnt_status == false){
            $(this).next().slideUp();
            $(this).addClass("close");
        }else{
            $(this).next().slideDown();
            $(this).removeClass("close");
        }
    });

    //애플버튼 체크하기
    var apple_status;
    $(".btn_apple button").on("click", function(){
        apple_status = $(this).hasClass("yes");
        if(apple_status){
            $(this).removeClass();
            $(this).addClass("no");
            $(this).next().find("input.yes").attr("checked", false);
            $(this).next().find("input.no").attr("checked", true);
            $(this).text($(this).next().find("input.no").parent().text());
        }else{
            $(this).removeClass();
            $(this).addClass("yes");
            $(this).next().find("input.no").attr("checked", false);
            $(this).next().find("input.yes").attr("checked", true);
            $(this).text($(this).next().find("input.yes").parent().text());
        }
    });

    //검사결과에 사진을 클릭하면
    $(".thumb_pic button").on("click", function(){
        $(".layer_pop_bg").fadeIn(300);
        $(".layer_pop .pic_area").empty();
        $(this).next().clone().appendTo($(".layer_pop .pic_area"));
        $(".layer_pop .tit").text($(this).parent().prev().text());
        $(".layer_pop").show();
        //$("html, body").css({overflow : "hidden", height : $(window).height()}).bind("scroll touchmove mousewheel", function(e){e.preventDefault();e.stopPropagation();return false;},function(){passive:false});
    });

    //체크박스를 이미지로 교체
    $(".checkbox_img").on("click", function(){
        var chk_status = $(this).hasClass("on");
        //console.log(chk_status);
        if(chk_status == true){
            $(this).removeClass("on");
            $(this).find("input[type='checkbox']").attr("checked", false);
            
        }else{
            $(this).addClass("on");
            $(this).find("input[type='checkbox']").attr("checked", true);
        }
    });
    //검사판정 결과 체크 -- 체크박스를 이미지로 교체
    $(".opinion .radio_img").on("click", function(){
        $(".opinion .radio_img").removeClass("on");
        $(this).addClass("on");
        $(this).find("input[type='radio']").attr("checked", true);
        $(".complete_result").hide();
        $(".complete_result.result_"+$(this).find("input[type='radio']").val()).show();
        if($(this).find("input[type='radio']").val() == "fail"){
            $(".complete_result.result_fail .result_cnt .result_comment").remove();
            $(".chk_complete .result_list>li .tit").filter(":contains('부적합')").next().clone().appendTo($(".complete_result.result_fail .result_cnt"));
            $(".complete_result.result_fail .result_cnt .result_comment .thumb_pic").remove();
            $(".complete_result.result_fail .result_cnt .result_comment ul li").append("<textarea class='input w_100per h_50px'></textarea>");
        }
    });

    //탭메뉴 
    $(".tab_cnt ul li button").on("click", function(){
        $(".tab_cnt ul li").removeClass("on");
        $(this).parent().addClass("on");
        $(this).next().show();
        $(".tab_cnt").height($(this).next().height() + 55);
    });

    //표준복장 체크 
    $(".cloth_standard ul li button").on("click", function(){
        $(".cloth_standard ul li").removeClass("on");
        $(this).parent().addClass("on");
    });

    $(".cloth_chk .cloth_sign .sign").on("click", function(){
        $(this).addClass("pop");
        $(".layer_pop_bg").fadeIn(300);
        $(".sign_pop").show();
        //$(".layer_pop .pic_area").empty();
        //$(".sigPad").appendTo($(".layer_pop .pic_area"));
        //$(".layer_pop .tit").text("서명하기");
        //$(".layer_pop").show();
        //$("html, body").css({overflow : "hidden", height : $(window).height()}).bind("scroll touchmove mousewheel", function(e){e.preventDefault();e.stopPropagation();return false;},function(){passive:false});
    });

    $(".sign_pop .btn_close, .layer_pop_bg").on("click", function(){
        var sign_w = $(".cloth_chk .cloth_sign .sign").width();
        var sign_h = $(".cloth_chk .cloth_sign .sign").height();
        $(".sign_pop").hide();
        $(".layer_pop_bg").fadeOut(300);
        $("html, body").css({overflow : "visible", height : "auto"}).unbind('scroll touchmove mousewheel');
        //$(".sign_pop .pad").clone().appendTo($(".cloth_chk .cloth_sign .sign"));
        //$(".cloth_chk .cloth_sign .sign .pad").css("transform", "scale(0.2)")
    });

    $(".drawing_pop .btn_close, .drawing_pop .drawing_map map area, .drawing_pop .drawing_list ul li").on("click", function(){
        $(".drawing_pop").hide();
        $(".drawing_pop_bg").fadeOut(300);
    });

    $(".drawing_view").on("click", function(){
        $(".drawing_pop").show();
        $(".drawing_pop_bg").fadeIn(300);
    });

    $(".header .header_sub .device .car").on("click", function(){
        pop_iframe_open("car", "운행차량 설정");
    });

    $(".header .header_sub .device .machine, .ready_machine").on("click", function(){
        pop_iframe_open("machine", "계측기 설정");
    });

    $(".header .header_sub .person ul").on("click", function(){
        pop_iframe_open("person", "동행자 설정");
    });
    $(".my_work .container .work_list .work_add button").on("click", function(){
        pop_iframe_open("work", "업무추가");
    });
    $(".my_work .container .work_list>ul>li.open .info button").on("click", function(){
        pop_iframe_open("info", "고객정보");
    });
    
    function pop_iframe_open(pop_name, title){
        $(".layer_pop_frame").removeClass("car");
        $(".layer_pop_frame").removeClass("machine");
        $(".layer_pop_frame").removeClass("person");
        $(".layer_pop_frame").removeClass("work");
        $(".layer_pop_frame").removeClass("info");
        $(".layer_pop_frame").addClass(pop_name);
        $(".layer_pop_frame .tit").text(title);
        $(".layer_pop_frame iframe").attr("src", "popup/"+pop_name+".html");
        //var the_height=document.getElementById('layer_pop_frame').contentWindow.document.body.scrollHeight;
        $(".layer_pop_frame .pop_cnt").height(window_h-150);
        $(".layer_pop_frame").show();
        $(".layer_pop_bg").fadeIn(300);
    }

});

function pop_open(pop_name){
    pop_name = $("."+pop_name);
    pop_name.show();
    $(".layer_pop_bg").fadeIn(300);
}


//오늘 계산
function getToday(){
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    var date = now.getDate();

    if((month + "").length < 2){
        month = "0" + month;
    }else{
        month = "" + month;   
    }
    return today = year+"."+month+"."+date;
}

function getAfterDay(type, after){
    var date = new Date();
    var year;
    var month;
    var date;

    if(type == "month"){
        date.setMonth(date.getMonth() + after);
        year = date.getFullYear();
        month = date.getMonth() + 1;
        day = date.getDate();
        document.write(year+"."+month+"."+day);
    }
    if(type == "year"){
        date.setFullYear(date.getFullYear() + after);
        year = date.getFullYear();
        month = date.getMonth() + 1;
        day = date.getDate();
        document.write(year+"."+month+"."+day);
    }
}
 

이부분에서 버튼을 누르면 슬라이드 버튼이 닫히고 열리고 하는데 로드 되었을때 열려있습니다.. 처음에 닫힌 상태로 로드되게 하려면 어떻게 해야할까요?

 

스트립트를 아예 몰라서.ㅠ.ㅠ

 

부탁드릴게요.ㅠ.ㅠ

이 질문에 댓글 쓰기 :

답변 1

.cnt_group 클래스를 가진 html 요소에 close 클래스를 추가하세요


// 예시
<div class="cnt_group"> ~~~ </div>
==>
<div class="cnt_group close"> ~~~ </div>

<div class="cnt_group play_step2_sub1">
<h2 class="cnt_tit">설치현황 </h2>
<div class="cnt_detail">
<div class="tbl row">
<table>
<caption>설치현황</caption>
<colgroup>
<col width="20%" />
<col width="30%" />
<col width="20%" />
<col />
</colgroup>
<tbody>
<tr>
<th scope="row">수전실명</th>
<td class="bdT"><input type="text" class="input w_100per" /></td>
<th scope="row">상세위치</th>
<td class="bdT"><input type="text" class="input w_100per" /></td>
</tr>
<tr>
<th scope="row">설비교체 현황</th>
<td colspan="3">
<select class="input w_100per">
<option>유입</option>
<option>건식</option>
<option>패드변압기</option>
<option>특수변압기</option>
</select>
</td>

</tr>
<!-- ●●●●●●●●●●●●●●●●●●●●●●●●● 검사결과로 전송되어야 하는 데이터 ●●●●●●●●●●●●●●●●●●●●●●●●● -->
<tr>
<th scope="row">사고원인</th>
<td>
<select class="input w_100per">
<option>유입</option>
<option>건식</option>
<option>패드변압기</option>
<option>특수변압기</option>
</select>
</td>
<th scope="row">사고형태</th>
<td>
<select class="input w_100per">
<option>유입</option>
<option>건식</option>
<option>패드변압기</option>
<option>특수변압기</option>
</select>
</td>
</tr>
<tr>
<th scope="row">용도</th>
<td>
<select class="input w_100per">
<option>유입</option>
<option>건식</option>
<option>패드변압기</option>
<option>특수변압기</option>
</select>
</td>
<th scope="row">종류</th>
<td>
<select class="input w_100per">
<option>유입</option>
<option>건식</option>
<option>패드변압기</option>
<option>특수변압기</option>
</select>
</td>
</tr>
<tr>
<th scope="row">제작사</th>
<td>
<select class="input w_100per">
<option>유입</option>
<option>건식</option>
<option>패드변압기</option>
<option>특수변압기</option>
</select>
</td>
<th scope="row">제작년일</th>
<td>
<select class="input w_100per">
<option>유입</option>
<option>건식</option>
<option>패드변압기</option>
<option>특수변압기</option>
</select>
</td>
</tr>
<tr>
<th scope="row">제작번호</th>
<td><input type="text" class="input w_100per" /></td>
<th scope="row">상수</th>
<td><input type="text" class="input w_100per" /></td>
</tr>
<tr>
<th scope="row">정격용량(kVA)</th>
<td><input type="text" class="input w_100per" /></td>
<th scope="row">1차 정격전압(V)</th>
<td>
<select class="input w_100per">
<option>유입</option>
<option>건식</option>
<option>패드변압기</option>
<option>특수변압기</option>
</select>
</td>
</tr>
<tr>
<th scope="row">2차 정격전압(V)</th>
<td>
<select class="input w_100per">
<option>유입</option>
<option>건식</option>
<option>패드변압기</option>
<option>특수변압기</option>
</select>
</td>
<th scope="row">3차 정격전압(V)</th>
<td><input type="text" class="input w_100per" /></td>
</tr>
<tr>
<th scope="row">결선방식 및 각변위</th>
<td>
<select class="input w_100per">
<option>유입</option>
<option>건식</option>
<option>패드변압기</option>
<option>특수변압기</option>
</select>
</td>
<th scope="row">%z (%)</th>
<td><input type="text" class="input w_100per" /></td>
</tr>
<tr>
<th scope="row">냉각방식_유입</th>
<td>
<select class="input w_100per">
<option>유입</option>
<option>건식</option>
<option>패드변압기</option>
<option>특수변압기</option>
</select>
</td>
<th scope="row">부하종류</th>
<td>
<select class="input w_100per">
<option>유입</option>
<option>건식</option>
<option>패드변압기</option>
<option>특수변압기</option>
</select>
</td>
</tr>
<

답변을 작성하시기 전에 로그인 해주세요.
전체 28
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT