클릭하면 입력항목 나오는 소스 좀 봐주시겠어요?

클릭하면 입력항목 나오는 소스 좀 봐주시겠어요?

QA

클릭하면 입력항목 나오는 소스 좀 봐주시겠어요?

본문

안녕하세요.
그누보드 게시판 글 작성 시 처음에는 입력항목이 보이지 않다가
글자나 버튼을 클릭하면 입력항목이 나오게 하려고 합니다.(다시 클릭하면 닫히고...)


구글링으로 아래와 같은 소스를 찾았는데,


    <script type="text/javascript"> 
        var bDisplay = true; function doDisplay(){     
            var con = document.getElementById("myDIV");     
            if(con.style.display=='none'){         
                con.style.display = 'block';     
            }else{         
                con.style.display = 'none';     
            } 
        } 
    </script> 

    <a href="javascript:doDisplay();">열기 닫기</a>
    <div id="myDIV">
    내용 자리(주소 검색으로 다음지도 표시하기)
    </div> 

이 소스는 처음에는 입력항목이 보여지고 클릭하면 닫히고 다시 클릭하면 열리는 구조입니다.
혹시 이걸 처음에는 입력항목이 안보여지고 클릭하면 열리고 다시 클릭하면 닫히게 할 수는 없을까요?

 

아무리 해봐도 잘 안돼서
다시 구글링으로 아래와 같은 소스를 찾긴 했는데,


<script type="text/javascript">
//<![CDATA[
function clickshow(elem,ID) {
 var menu = document.getElementById(ID);
 if (elem.className !='closed') {
    elem.className = 'closed';
    menu.style.display = "none";
 } else {
    elem.className ='opened';
    menu.style.display ="block";
}}
//]]>
</script>
<h3 class="closed" onclick="clickshow(this,'categories')">열기 닫기</h3>
<div id="categories" style="display: none;">
 내용 자리(주소 검색으로 다음지도 표시하기)
</div>

문제는 display: none 때문에 내용 자리에 있는 다음지도가 주소로 검색하기 전에는 제대로 보여지지 않는 문제가 있어서요.

 

1888667148_1712041016.5762.png

아시는 분 답변 좀 부탁드립니다.
감사합니다.
 

이 질문에 댓글 쓰기 :

답변 2


<button type="button" onclick="doDisplay()">열기 닫기</button>

<div id="myDIV" style="display:none">
입력 항목
</div>
<div id="myDIV2">
다음 지도
</div>
 
<script>
function doDisplay() {
    $('#myDIV').toggle();
}
</script>

친절하신 답변 감사합니다.

<div id="myDIV" style="display:none">
입력 항목
</div>
이 안에 주소입력과 지도를 넣으면 display:none 때문에 제가 사용한 두번째 소스처럼 지도가 제대로 나오지 않습니다.

<div id="myDIV2">
다음 지도
</div>
이안에 지도만 넣으면 클릭하기 전에 이미 지도가 보여지니 제가 원하는게 아니고요.


<button type="button" onclick="doDisplay()">열기 닫기</button>

<div id="myDIV" style="display:none">
입력 항목
</div>
 
<script>
function doDisplay() {
  if ($("#myDIV").is(":hidden")) {
  	지도 생성/노출 코드
  	$('#myDIV').show();
  } else {
  	$('#myDIV').hide();
  }
    
}
</script>

계속된 답변 정말 감사합니다.
그런데 이번에 알려주신 걸 적용하면 클릭해도 열리질 않네요.

제가 클릭시 보여주고 싶은 내용은 아래와 같은데,
기존에 알려주신 소스와 제가 본문에 적은 소스 두번째것은 처음 클릭시 열면 지도가 제대로 안 나오고,
주소로 검색을 해야만 제대로 열리는 문제가 있습니다.

아... 다시 테스트해보니 처음 열었을때는 지도가 안보이는데,
모바일에서는 스크롤을 위아래로해서 지도를 안보이게 벗어났다가 돌아오면 지도가 보이고,
PC 크롬에서는 F12눌렀다 끄니 지도가 보여지곤 하네요.



    <div class="bo_w_link write_div">
        <label for="wr_7"><i class="fa fa-map-marker" aria-hidden="true"></i><span class="sound_only">주소<strong>필수</strong></span></label>
        <input type="text" name="wr_7" value="<?php echo $write['wr_7']?>" id="wr_7" class="frm_input full_input" placeholder="주소검색" style="width:90%;" readonly>
        <a href="javascript:void(0);" class="ser_bbt" id="ser_bbt"><i class="fa fa-search" aria-hidden="true"></i></a>
    </div>

    <div style="background-color:#f9f9f9;width:100%;margin-top:5px;margin-bottom:5px;height:300px;border-radius:4px;" id="map"></div>
    <div style="margin-bottom:20px;">
        <input type="text" name="wr_5" value="<?php echo $write['wr_5']; ?>" id="wr_5" class="frm_input winp" readonly>
        <input type="text" name="wr_6" value="<?php echo $write['wr_6']; ?>" id="wr_6" class="frm_input winp" readonly>
    </div>

    <div id="clickLatlng"></div>

        <script type="text/javascript" src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
        <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<?php echo $board['bo_1'] ?>&libraries=services"></script>
        <script>
	var mapContainer = document.getElementById('map'), // 지도를 표시할 div
		mapOption = {
			center: new daum.maps.LatLng(<?php echo $write['wr_5']?>, <?php echo $write['wr_6']?>), // 지도의 중심좌표
			level: 6 // 지도의 확대 레벨
		};

	// 지도를 생성합니다
	var map = new daum.maps.Map(mapContainer, mapOption);
	// 주소-좌표 변환 객체를 생성합니다
	var geocoder = new daum.maps.services.Geocoder();
	// 지도를 클릭한 위치에 표출할 마커입니다
	var marker = new daum.maps.Marker({
		map: map,
		// 지도 중심좌표에 마커를 생성합니다
		position: map.getCenter()
	});

	function getLByAddress(address) {
		// 주소로 좌표를 검색합니다
		geocoder.addressSearch(address, function(result, status) {
			// 정상적으로 검색이 완료됐으면
			 if (status === daum.maps.services.Status.OK) {

				var coords = new daum.maps.LatLng(result[0].y, result[0].x);
				marker.setPosition(coords);
				// 지도에 마커를 표시합니다
				marker.setMap(map);
				// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
				map.setCenter(coords);
				document.getElementById('wr_5').value = coords.getLat();
				document.getElementById('wr_6').value = coords.getLng();
			}
		});
	}

	// 지도에 클릭 이벤트를 등록합니다
	// 지도를 클릭하면 마지막 파라미터로 넘어온 함수를 호출합니다
	daum.maps.event.addListener(map, 'click', function(mouseEvent) {
		// 지도에 마커를 표시합니다
		marker.setMap(map);

		// 클릭한 위도, 경도 정보를 가져옵니다
		var latlng = mouseEvent.latLng;

		// 마커 위치를 클릭한 위치로 옮깁니다
		marker.setPosition(latlng);

		document.getElementById('wr_5').value = latlng.getLat();
		document.getElementById('wr_6').value = latlng.getLng();

	});

 ~~~
                    
                    $("#ser_bbt").on("click", function() {
                        new daum.Postcode({
                            oncomplete: function(data) {
                                //console.log(data);
                                $("#wr_7").val(data.address);
                                //$("#road").val(data.roadAddress);
                                //$("#sido").val(data.sido);
                                //$("#gugun").val(data.sigungu);
                                //$("#dong").val(data.bname);

                                geocoder.addressSearch(data.address, function(results, status) {
                                    // 정상적으로 검색이 완료됐으면
                                    if (status === daum.maps.services.Status.OK) {

                                        //첫번째 결과의 값을 활용
                                        var result = results[0];

                                        // 해당 주소에 대한 좌표를 받아서
                                        var coords = new daum.maps.LatLng(result.y, result.x);

                                        // 지도를 보여준다.
                                        map.relayout();

                                        // 지도 중심을 변경한다.
                                        map.setCenter(coords);

                                        // 좌표값을 넣어준다.
                                        document.getElementById('wr_5').value = coords.getLat();
                                        document.getElementById('wr_6').value = coords.getLng();

                                        // 마커를 결과값으로 받은 위치로 옮긴다.
                                        marker.setPosition(coords);
                                    }
                                });

                            }
                        }).open();
                    });
                });
    </script>

faq 게시판 소스 뜯어고치다 알게 되었는데,

마르스컴퍼니님께서 처음 알려주신 소스중
<div id="myDIV" style="display:none">를
<div id="myDIV">로 바꾸고

하단에
<style>
#myDIV {display:none;}
</style>
이렇게 넣으니 지도가 정상적으로 나오네요.
지도 상단에 넣으면 안나오고요.

뭐 방법이야 여러가지겠지만 input hidden 으로 특정 값을 설정하고...
검색시 해당 hidden value 에 어떤 특정값을 넣은 뒤 그 값을 기준으로 삼으시면 되지 않을까 싶네요?

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

회원로그인

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