그누보드 QA - 모바일에서 js 안되는부분 도와주세요!

모바일에서 js 안되는부분 도와주세요!

몽글몽그리 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2024.10.31 10:40:04 184 (118.♡.♡.111)

답변 3

본문

아래 코드 첨부합니다

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">

<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>개인정보취급방침 동의 (필수)

</span>
</label>

<button type="button" id="btn_bottom_submit" >상담신청하기</button>

</div>
</div>
</form>

// 현재 높이를 확인하고 토글
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;}

}

@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;}

}

</style>

#자바스크립트

답변 3

미니님a 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2024-10-31 19:02:53 125.♡.♡.184

Jquery 코드를 자바스크립트로 변환한 코드입니다.

기존 코드랑 바꾸세요


document.getElementById('openBtn').addEventListener('click', function() {
    var box = document.querySelector('.counsel_wrap_fixed');
 
    // 현재 높이를 확인하고 토글
    if (box.offsetHeight === 70) {
        box.style.transition = 'height 0.5s';
        box.style.height = '230px'; // 230px로 확장
    } else {
        box.style.transition = 'height 0.5s';
        box.style.height = '70px'; // 70px로 축소
    }
});
 
document.getElementById('btn_bottom_submit').addEventListener('click', function() {
    var wr5 = document.getElementById("wr_5");
    var wr1 = document.getElementById("wr_1");
    var wr2 = document.getElementById("wr_2");
    var chk = document.getElementById("chk");
    var wr6 = document.getElementById("wr_6");
 
    if (wr5.value === "") {
        alert("성함 입력은 필수 사항입니다.");
        wr5.focus();
        return false;
    }
    if (wr1.value === "") {
        alert("연락처 입력은 필수 사항입니다.");
        wr1.focus();
        return false;
    }
    if (wr2.value === "") {
        alert("진료과목 선택은 필수 사항입니다.");
        wr2.focus();
        return false;
    }
 
    if (!chk.checked) {
        alert("개인정보 수집 및 이용에 동의하셔야 합니다.");
        return false;
    } else {
        wr6.value = "Y";
    }
 
    var wr_1 = wr1.value;
    var wr_2 = wr2.value;
    var wr_5 = wr5.value;
    var wr_6 = "Y";
    var bo_table = "0603";
});

미니님a 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2024-10-31 13:04:46 58.♡.♡.26

jquery를 쓰셨는데 jquery 라이브러리가 없어서 발생한 문제네요


<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

이 한줄을 맨위에 넣어주시면 정상적으로 동작할 껍니다. 978180634_1730347484.6779.gif

몽글몽그리 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2024-10-31 18:46:51 118.♡.♡.111

이게 아임웹에서는 기존js랑 중복인지 저거 한줄을 넣으면 다른게 날라가 보이고 이상하게 뜨네요... 방법이 없겠죠?ㅠㅠ

↳ 미니님a 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2024-10-31 18:59:21125.♡.♡.184

초기 버전 링크하세요
https://code.jquery.com/jquery-latest.min.js

답변을 작성하시기 전에 로그인 해주세요.

QA

본문

이 질문에 댓글 쓰기 :

답변 3