자바스크립트 질문 드려요 채택완료
$(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(""); } });
//탭메뉴 $(".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 클래스를 추가하세요
</p>
<p>// 예시</p>
<p><div class="cnt_group"> ~~~ </div></p>
<p>==></p>
<p><div class="cnt_group close"> ~~~ </div></p>
<p>
답변에 대한 댓글 2개
html 페이지를 보여주시고 어디 부분인지 찝어주셔야 정확한 답을 드릴수 있습니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
<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>
<