이미지 버튼 클릭시 지정 위치에 div 불러오기

이미지 버튼 클릭시 지정 위치에 div 불러오기

QA

이미지 버튼 클릭시 지정 위치에 div 불러오기

본문

특정 이미지를 클릭하면 div내용이 나타났다

다시 한번 클릭하면 div내용이 사라지는 소스를 알고 싶습니다

 

---------------------------------------------------------------------------------------

<div class="translation-links">
            <img src="<?php echo G5_IMG_URL?>/gtlogo.gif" width="105px" alt='구글 번역 api'/><br>
            <a href="javascript:void(0)" class="korea" data-lang="ko" title="대한민국"><span class="flag kr"></span></a>
            <a href="javascript:void(0)" class="netherlands" data-lang="nl" title="네덜란드"><span class="flag nl"></span></a>
            <a href="javascript:void(0)" class="germany" data-lang="de" title="독일"><span class="flag de"></span></a>
            <a href="javascript:void(0)" class="russia" data-lang="ru" title="러시아"><span class="flag ru"></span></a>
            <a href="javascript:void(0)" class="vetnam" data-lang="vi" title="베트남"><span class="flag vn"></span></a>
            <a href="javascript:void(0)" class="sweden" data-lang="sv" title="스웨덴"><span class="flag se"></span></a>
            <a href="javascript:void(0)" class="spain" data-lang="es" title="스페인"><span class="flag es"></span></a>
            <a href="javascript:void(0)" class="usa" data-lang="en" title="미국"><span class="flag us"></span></a>
            <a href="javascript:void(0)" class="ukraine" data-lang="uk" title="우크라이나"><span class="flag ua"></span></a>
            <a href="javascript:void(0)" class="italy" data-lang="it" title="이탈리아"><span class="flag it"></span></a><br>
            <a href="javascript:void(0)" class="indonesia" data-lang="id" title="인도네시아"><span class="flag id"></span></a>
            <a href="javascript:void(0)" class="japn" data-lang="ja" title="일본"><span class="flag jp"></span></a>
            <a href="javascript:void(0)" class="china" data-lang="zh-CN" title="중국"><span class="flag cn"></span></a>
            <a href="javascript:void(0)" class="taiwan" data-lang="zh-TW" title="대만"><span class="flag tw"></span></a>
            <a href="javascript:void(0)" class="czech" data-lang="cs" title="체코"><span class="flag cz"></span></a>
            <a href="javascript:void(0)" class="philippines" data-lang="tl" title="필리핀"><span class="flag ph"></span></a>
            <a href="javascript:void(0)" class="thailand" data-lang="th" title="태국"><span class="flag th"></span></a>
            <a href="javascript:void(0)" class="turkey" data-lang="tr" title="터키"><span class="flag tr"></span></a>
            <a href="javascript:void(0)" class="portugal" data-lang="pt" title="포르투갈"><span class="flag pt"></span></a>
            <a href="javascript:void(0)" class="poland" data-lang="pl" title="폴란드"><span class="flag pl"></span></a>            
        </div>

 

------------------

위 소스가 특정이미지를 클릭하면 나타났다 다시 클릭하면 사라지는 소스를 알고 싶습니다

이 질문에 댓글 쓰기 :

답변 2

다음과 같은 방법도 있으니 참고해 보세요


  <style>
    .translation-links {
      display: none;
    }
  </style>
 
<div class="translation-links">
  <img src="<?php echo G5_IMG_URL?>/gtlogo.gif" width="105px" alt='구글 번역 api'/><br>
  <a href="javascript:void(0)" class="korea" data-lang="ko" title="대한민국"><span class="flag kr"></span></a>
  <!-- 나머지 링크들... -->
</div>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    var translationLinks = document.querySelector('.translation-links');
    var img = document.querySelector('.translation-links img');
    // 이미지 클릭 시 이벤트 핸들러
    img.addEventListener('click', function () {
      if (translationLinks.style.display === 'none') {
        translationLinks.style.display = 'block';
      } else {
        translationLinks.style.display = 'none';
      }
    });
  });
</script>

jquery toggle 을 검색해 보세요..
아래는 간단한 샘플입니다.

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
어떤 형태로든 jquery 파일은 포함시켜 줘야 합니다.

 


<script>
    $(document).ready( function() {
        $( 'p.a' ).click( function() {
            $( 'p.b' ).toggle( 'slow' );
        });
    });
</script>
<style>
    p.a {
    cursor: pointer;
    font-weight: bold;
    }
</style>
<p class="a">클릭하면 감춰요</p>
<p class="b">내용은 이곳에 넣으세요</p>
답변을 작성하시기 전에 로그인 해주세요.
전체 7,652
QA 내용 검색

회원로그인

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