jQuery를 사용하여 요소 표시 및 숨기기

jQuery를 사용하여 요소를 표시하고 숨기는 방법 일부 HTML 요소 위로 마우스를 클릭하면 몇 가지 추가 정보가 표시되고 해당 요소에서 마우스를 클릭하면 추가 메시지가 자동으로 숨겨집니다. 아래 예에서는 추가 메시지를 숨기고 표시하기 위해 마우스 클릭을 사용했습니다. 귀하의 요구 사항에 따라 모든 이벤트를 사용할 수 있습니다.

요소 표시/숨기기 jQuery

jQuery는 강력한 기능Javascript library으로 여러 브라우저에서 웹 사이트에 유용한 Javascript 항목을 쉽게 추가할 수 있습니다. 이 게시물에서는 jQuery로 show(), hide(), toggle(), fadeIn() 및 fadeOut() 함수를 사용하여 요소를 표시하고 숨기는 방법을 살펴봅니다.

jQuery로 요소를 숨기는 가장 간단한 방법은 .hide()를 호출한 다음 .show()를 호출하여 다시 표시하는 것입니다. 이렇게 하면 요소가 즉시 표시되거나 숨겨집니다.

우리는 id를 "show"라고 부르고 CSS 클래스를 "soft-toggle"이라고 해서 div를 숨깁니다. 이제 아래의 실제 예를 살펴보겠습니다.

HTML 코드:

<script src='https://code.jquery.com/jquery-1.7.2.js'></script>
<div class="soft">
<button id="#show" class="soft-toggle">Show</button>
</div>
<div id="show" style="display:none">
<p>Something is hidden By SoftCodeOn</p>
</div>

CSS 코드:

<style>
.soft{text-align:center;}
.soft-toggle {
border: 1px solid #eee;
font-size:30px;
background:#000;
color:#fff;
width:200px;
height:100px;
border-radius:30px;
}
#show{text-align:center;}
</style>

자바스크립트 코드:

 <script id="rendered-js" >
$(document).ready(function () {
  $('.soft-toggle').click(function () {
    //get collapse content selector
    var collapse_content_selector = $(this).attr('href');

    //make the collapse content to be shown or hide
    var toggle_switch = $(this);
    $(collapse_content_selector).toggle(function () {
      if ($(this).css('display') == 'none') {
        //change the button label to be 'Show'
        toggle_switch.html('Show');
      } else {
        //change the button label to be 'Hide'
        toggle_switch.html('Hide');
      } }); });});
    </script>

이것은 이러한 기능을 사용하는 이 두 게시물의 매우 기본적인 사용법입니다. 일반적으로 버튼을 클릭하면 요소를 표시하거나 숨기지 않을 수 있지만 요점을 쉽게 설명할 수 있습니다.

항목을 표시하고 숨기는 일반적인 용도는 탐색 요소 위로 마우스를 가져가 하위 메뉴를 표시하거나 전자 상거래 페이지에서 장바구니 아이콘을 클릭할 때 장바구니 내용을 표시하는 것입니다. 자세한 원본보기 : Show and Hide Elements using jQuery . 이 게시물이 마음에 드셨기를 바랍니다. 문제나 질문이 있으면 아래에서 논의하십시오. 고맙습니다.