모바일에서 js 안되는부분 도와주세요!
본문
아래 코드 첨부합니다
pc에서는 문제 없는데 모바일로 볼때
상담신청이라는 부분을 누르면 아래 하위의 내용들이
올라와서 보여지고 다시 누르면 내려가는 토글 기능이
구현되어야 하는데... 긁어온거라 따로 없는것 같고 추가로
넣어야될 코드가 있으면 알려주세요 ㅜㅜ
<form name="fwrite" id="fwrite">
<input type="hidden" name="wr_id" value="0">
<input type="hidden" name="sca" value="">
<input type="hidden" name="sfl" value="">
<input type="hidden" name="stx" value="">
<input type="hidden" name="spt" value="">
<input type="hidden" name="sst" value="">
<input type="hidden" name="sod" value="">
<input type="hidden" name="page" value="">
<input type="hidden" name="wr_subject" value="상담문의가 접수되었습니다.">
<input type="hidden" name="wr_content" value="문의가 접수되었습니다.">
<input type="hidden" name="wr_6" value="Y">
<div class="counsel_wrap_fixed" style="left: 0px;">
<div class="counsel_input">
<p id="openBtn">상담신청</p>
<input type="text" name="wr_5" value="" id="wr_5" placeholder="이름" maxlength="15" onkeyup="checkCharacter(this); maxLengthCheck(this);" onkeydown="checkCharacter(this); maxLengthCheck(this);">
<input type="text" name="wr_1" value="" id="wr_1" placeholder="연락처(-없이 입력)" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" maxlength="11">
<!-- <input type="text" name="hphoneall" placeholder="연락처(-없이 입력)" maxlength="11" /> -->
<div class="select_bg_box">
<select name="wr_2" id="wr_2">
<option value="">진료과목선택</option>
<option value="눈성형">눈성형</option>
<option value="코성형">코성형</option>
<option value="리프팅">리프팅</option>
<option value="쁘띠">쁘띠</option>
<option value="기타">기타</option>
</select>
</div>
<label>
<input type="checkbox" id="chk" name="chk">
<span>개인정보취급방침 동의 (필수)
<!-- <a href="/member/privacy.php"> [자세히보기]</a> -->
</span>
</label>
<!-- <input type="submit" value="상담신청하기"> -->
<button type="button" id="btn_bottom_submit" >상담신청하기</button>
</div>
</div>
</form>
<style>
.counsel_wrap_fixed {width: 100%;height: 70px;background-color: rgba(0, 0, 0, 0.7);position: fixed;bottom: 0;z-index: 9;left: 0 !important;}
.counsel_wrap_fixed>.counsel_input { width: 1200px; margin: 0 auto; text-align: center; }
.counsel_wrap_fixed>.counsel_input>p { font-weight: bold; margin-right: 10px; color: #fff; font-size: 26px; display: inline-block; margin-top: 16px; margin-bottom: 17px; vertical-align: middle; }
.counsel_wrap_fixed>.counsel_input>input:nth-child(2) { width: 15%; height: 44px; font-size: 20px; padding-left: 10px; border: none; box-sizing: border-box; }
.counsel_wrap_fixed>.counsel_input>input:nth-child(3) { width: 15%; height: 44px; font-size: 20px; padding-left: 10px; border: none; box-sizing: border-box; }
.counsel_wrap_fixed>.counsel_input .select_bg_box { width: 15%; height: 44px; background: #fff; display: inline-block; }
.counsel_wrap_fixed>.counsel_input .select_bg_box select {width: 100%; height: 44px; font-size: 20px; padding-left: 10px; border: none; box-sizing: border-box; appearance: none; background: url('https://cdn.imweb.me/upload/S2024071680f8b52cd7747/69b566b9afd1b.png') right 20px center no-repeat; background-size: inherit; outline: 0 none; }
.counsel_wrap_fixed>.counsel_input>label { display: inline; color: #ddd; font-size: 16px; }
.counsel_wrap_fixed>.counsel_input>label>input[type=checkbox] { width: 20px; height: 20px; margin: 0 5px 0 20px; vertical-align: middle;}
.counsel_wrap_fixed>.counsel_input>label>span { vertical-align: middle; }
.counsel_wrap_fixed>.counsel_input>label>span>a { text-decoration: none; color: #fff; }
.counsel_wrap_fixed>.counsel_input>input[type=submit] { height: 48px; background: #2585bf; color: #fff; border: none; font-size: 20px; text-align: center; margin-left: 10px; padding: 10px 50px; }
#btn_bottom_submit{ height: 45px; background: #be6386; color: #fff; border: none; font-size: 20px; text-align: center; margin-left: 20px; padding: 0px 30px; vertical-align: middle;}
</style>
<script>
$('#openBtn').click(function() {
var $box = $('.counsel_wrap_fixed');
// 현재 높이를 확인하고 토글
if ($box.height() === 70) {
$box.animate({ height: '230px' }, 500); // 200px로 확장
} else {
$box.animate({ height: '70px' }, 500); // 70px로 축소
}
});
$("#btn_bottom_submit").click(function(){
if ($("#wr_5").val() == "") {
alert("성함 입력은 필수 사항입니다.");
$("#wr_5").focus();
return false;
}
if($("#wr_1").val() == ""){
alert("연락처 입력은 필수 사항입니다.");
$("#wr_1").focus();
return false;
}
if($("#wr_2").val() == ""){
alert("진료과목 선택은 필수 사항입니다.");
$("#wr_2").focus();
return false;
}
if($("input:checkbox[id='chk']").is(":checked") == false){
alert("개인정보 수집 및 이용에 동의하셔야 합니다.");
return false;
}else{
$("#wr_6").val("Y");
}
var wr_1 = $('#wr_1').val();
var wr_2 = $('#wr_2').val();
var wr_5 = $('#wr_5').val();
var wr_6 = "Y";
var bo_table = "0603";
});
</script>
<style>
@media screen and (max-width:1200px){
.counsel_wrap_fixed { width: 100%; height: 164px; background-color: rgba(0, 0, 0, 0.7); position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; margin: 0 auto; }
.counsel_wrap_fixed>.counsel_input>p{display: none;}
.counsel_wrap_fixed>.counsel_input { position: relative; width: 100%; margin: 0;padding: 10px; text-align: center;}
.counsel_wrap_fixed>.counsel_input>input[type=text] { width: 49%; height: 35px; font-size: 14px; padding-left: 10px; border: none; box-sizing: border-box; /* margin-top: 25px; */ }
.counsel_wrap_fixed>.counsel_input>input:nth-child(4) { margin-top: 14px; }
.counsel_wrap_fixed>.counsel_input .select_bg_box { display: inline-block; color: #000; width: 32%; height: 35px; font-size: 16px; margin: 10px 0 0 0px; border: none; box-sizing: border-box; background: #fff; vertical-align: bottom; border-radius: 5px; color: #333; }
.counsel_wrap_fixed>.counsel_input .select_bg_box select { width: 100%; height: 35px; font-size: 14px; padding-left: 5px; background: url(https://cdn.imweb.me/upload/S2024071680f8b52cd7747/69b566b9afd1b.png) right 10px center no-repeat;}
.counsel_wrap_fixed>.counsel_input select { width: 290px; height: 50px; font-size: 20px; padding-left: 20px; margin-top: 1px; border: none; box-sizing: border-box; appearance: none; background: url(https://cdn.imweb.me/upload/S2024071680f8b52cd7747/69b566b9afd1b.png) right 20px center no-repeat; background-size: inherit; outline: 0 none; }
.counsel_wrap_fixed>.counsel_input>label { display: inline-block; width: 35%; color: #ddd; font-size: 14px; margin-left: 5px; letter-spacing: -1.4px; padding:5px}
.counsel_wrap_fixed>.counsel_input>label>input[type=checkbox] { width: 22px; height: 22px; margin-right: 10px; margin-top: 14px; }
.counsel_wrap_fixed>.counsel_input>label>span { vertical-align: -9px; }
.counsel_wrap_fixed>.counsel_input>label>span>a { text-decoration: none; color: #fff; }
.counsel_wrap_fixed>.counsel_input>input[type=submit] { width: 380px; height: 50px; background: #2585bf; color: #fff; border: none; font-size: 20px; letter-spacing: -1.75px; font-weight: 600; position: absolute; top: 105px; right: 5px; padding:10px;}
}
@media screen and (max-width:850px) {
.counsel_wrap_fixed { width: 100%; height: 164px; background-color: rgba(0, 0, 0, 0.7); position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; margin: 0 auto; }
.counsel_wrap_fixed>.counsel_input>p{display: none;}
.counsel_wrap_fixed>.counsel_input { position: relative; width: 100%; margin: 0;padding: 10px; text-align: center;}
.counsel_wrap_fixed>.counsel_input>input[type=text] { width: 49%; height: 35px; font-size: 14px; padding-left: 10px; border: none; box-sizing: border-box; }
.counsel_wrap_fixed>.counsel_input>input:nth-child(4) { margin-top: 14px; }
.counsel_wrap_fixed>.counsel_input .select_bg_box { display: inline-block; color: #000; width: 32%; height: 35px; font-size: 16px; margin: 10px 0 0 0px; border: none; box-sizing: border-box; background: #fff; vertical-align: bottom; border-radius: 5px; color: #333; }
.counsel_wrap_fixed>.counsel_input .select_bg_box select { width: 100%; height: 35px; font-size: 14px; padding-left: 5px; background: url(https://cdn.imweb.me/upload/S2024071680f8b52cd7747/69b566b9afd1b.png) right 10px center no-repeat;}
.counsel_wrap_fixed>.counsel_input select { width: 290px; height: 50px; font-size: 20px; padding-left: 20px; margin-top: 1px; border: none; box-sizing: border-box; appearance: none; background: url(https://cdn.imweb.me/upload/S2024071680f8b52cd7747/69b566b9afd1b.png) right 20px center no-repeat; background-size: inherit; outline: none; }
.counsel_wrap_fixed>.counsel_input>label { display: inline-block; width: 35%; color: #ddd; font-size: 14px; margin-left: 5px; letter-spacing: -1.4px; padding:5px;}
.counsel_wrap_fixed>.counsel_input>label>input[type=checkbox] { width: 22px; height: 22px; margin-right: 10px; margin-top: 14px; }
.counsel_wrap_fixed>.counsel_input>label>span { vertical-align: -9px; }
.counsel_wrap_fixed>.counsel_input>label>span>a { text-decoration: none; color: #fff; }
.counsel_wrap_fixed>.counsel_input>input[type=submit] { width: 380px; height: 50px; background: #2585bf; color: #fff; border: none; font-size: 20px; letter-spacing: -1.75px; font-weight: 600; position: absolute; top: 105px; right: 5px; padding:10px;}
}
@media screen and (max-width:480px) {
.counsel_wrap_fixed { width: 100%; height: 70px; background-color: rgba(0, 0, 0, 0.7); position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; margin: 0 auto; }
.counsel_wrap_fixed>.counsel_input>p{display: block;}
.counsel_wrap_fixed>.counsel_input { position: relative; width: 100%; margin: 0;padding: 0 10px; text-align: center;}
.counsel_wrap_fixed>.counsel_input>input[type=text] { width: 49%; height: 35px; font-size: 14px; padding-left: 10px; border: none; box-sizing: border-box; }
.counsel_wrap_fixed>.counsel_input>input:nth-child(4) { margin-top: 14px; }
.counsel_wrap_fixed>.counsel_input .select_bg_box { display: inline-block; color: #000; width: 32%; height: 35px; font-size: 16px; margin: 10px 0 0 0px; border: none; box-sizing: border-box; background: #fff; vertical-align: bottom; border-radius: 5px; color: #333; }
.counsel_wrap_fixed>.counsel_input .select_bg_box select { width: 100%; height: 35px; font-size: 14px; padding-left: 5px; background: url(https://cdn.imweb.me/upload/S2024071680f8b52cd7747/69b566b9afd1b.png) right 10px center no-repeat;}
.counsel_wrap_fixed>.counsel_input select { width: 290px; height: 50px; font-size: 20px; padding-left: 20px; margin-top: 1px; border: none; box-sizing: border-box; appearance: none; background: url(https://cdn.imweb.me/upload/S2024071680f8b52cd7747/69b566b9afd1b.png) right 20px center no-repeat; background-size: inherit; outline: 0 none; }
.counsel_wrap_fixed>.counsel_input>label { display: inline-block; width: 65%; color: #ddd; font-size: 14px; margin-left: 5px; letter-spacing: -1.4px; padding:5px;}
.counsel_wrap_fixed>.counsel_input>label>input[type=checkbox] { width: 22px; height: 22px; margin-right: 10px; margin-top: 14px; }
.counsel_wrap_fixed>.counsel_input>label>span { vertical-align: -9px; }
.counsel_wrap_fixed>.counsel_input>label>span>a { text-decoration: none; color: #fff; }
.counsel_wrap_fixed>.counsel_input>input[type=submit] { width: 380px; height: 50px; background: #2585bf; color: #fff; border: none; font-size: 20px; letter-spacing: -1.75px; font-weight: 600; position: absolute; top: 105px; right: 5px; padding:10px;}
#btn_bottom_submit{ width: 100%; height: 50px; background: #2585bf; color: #fff; border: none; font-size: 20px; letter-spacing: -1.75px; font-weight: 600; padding:10px; margin: 10px auto;}
}
</style>
답변 3
Jquery 코드를 자바스크립트로 변환한 코드입니다.
기존 코드랑 바꾸세요
jquery를 쓰셨는데 jquery 라이브러리가 없어서 발생한 문제네요
이 한줄을 맨위에 넣어주시면 정상적으로 동작할 껍니다.
이게 아임웹에서는 기존js랑 중복인지 저거 한줄을 넣으면 다른게 날라가 보이고 이상하게 뜨네요... 방법이 없겠죠?ㅠㅠ