표시 숨기기 사용 가능한 콘텐츠

Question

내 게시물에 일부 콘텐츠가 있습니다. 그러나 나는이 게시물의 링크를 클릭하기 전까지 그것을 숨기고 싶다. 나는이 사이트를 아직 만들지 않았지만 내 생각을 말할 것이다.

1. 제 표제어

2. 제
3. 세번째 표제어
4. I 위의 링크를 클릭 할 때까지 숨겨진 다음 네번째 표제어

/* 콘텐츠 제목. / / 콘텐츠는 div 태그로 싸여 있으며 다른 사이트에서로드하지 마십시오. */

1. 콘텐츠 1 만 표시 만 "2 번째 제목"
2. 콘텐츠 3 만 표시 될 것이다 클릭 "1. 제 제목"
3. 내용 2가 표시 될 것이다 클릭 것 "3. 세 번째 제목은"4가 표시됩니다
4. 내용은 클릭 클릭 "4. 네 번째 제목"

이 효과를 만드는 CSS 또는 아약스/jQuery를 사용할 수 있습니까?

Answer 1

다음과 같은 jQuery 코드를 사용하여 할 수있는 :

여기

$(document).ready(function(){ 
    $("#hide").click(function(){ 
    $("p").hide(); 
    }); 
    $("#show").click(function(){ 
    $("p").show(); 
    }); 
}); 

당신이 숨기고 클릭 이벤트로 요소를 보여줄 수있는 방법 complete demo입니다.

Answer 2

jQuery를 사용하면 꽤 쉽게 할 수 있습니다. 기본적으로 CSS로 .content div를 숨기고 해당 제목을 클릭으로 표시합니다. 아래 예제를 고려하십시오.

var $content = $('.content'); 
 
$('h2').click(function() { 
 
    $content.removeClass('show') 
 
      .filter('.content-' + $(this).data('content')) 
 
      .addClass('show'); 
 
});

.content { 
 
    display: none; 
 
    padding: 5px; 
 
    background: #EEE; 
 
} 
 
.content.show { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2 data-content="1">Heading #1</h2> 
 
<h2 data-content="2">Heading #2</h2> 
 
<h2 data-content="3">Heading #3</h2> 
 

 
<div class="content content-1">Content #1</div> 
 
<div class="content content-2">Content #2</div> 
 
<div class="content content-3">Content #3</div>

Answer 3

나는 같은 functionality.Checkout을 달성 순수 CSS는 아코디언을 한 codepen

HTML에서 다음 링크 :

<div class="container"> 
    <ul> 
    <li><a href="#first" class="acc-header">What is java Programming Language?</a> 
    <div class="acc-content" id="first"> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum vel aliquid. Quaerat soluta sed aperiam temporibus ipsum obcaecati porro commodi error unde reprehenderit ipsa, dolore id, totam dolores, quae. 
    </p> 
    </div></li> 
    <li><a href="#second" class="acc-header">How is javascript different from java?</a> 
    <div class="acc-content" id="second"> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum vel aliquid. Quaerat soluta sed aperiam temporibus ipsum obcaecati porro commodi error unde reprehenderit ipsa, dolore id, totam dolores, quae 
    </p> 
    </div></li> 
    <li><a href="#third" class="acc-header">Other front end technologies</a> 
    <div class="acc-content" id="third"> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum vel aliquid. Quaerat soluta sed aperiam temporibus ipsum obcaecati porro commodi error unde reprehenderit ipsa, dolore id, totam dolores, quae 
    </p> 
    </div></li> 
    </ul> 
</div> 

CSS :

*{ 
margin: 0; 
padding: 0; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 
body{ 
padding-top: 50px; 
font : 1em cursive; 
background-image: url(http://www.mrwallpaper.com/wallpapers/fantasy-winter-scenery-1920x1200.jpg); 
background-size: cover; 
color: #fff; 
overflow-x: hidden; 
} 
.container{ 
position: relative; 
width: 100%; 
max-width: 500px; 
margin: auto; 
padding: 5px; 
} 
ul{ 
margin: 0; 
padding: 0; 
list-style: none; 
} 
.acc-header{ 
display: block; 
cursor: pointer; 
padding: 10px 20px; 
background-color: #000; 
opacity: 0.7; 
text-transform: uppercase; 
text-decoration: none; 
text-align: center; 
color: #fff; 
border-radius: 2px; 
margin-bottom: 10px 0 0 10px; 
} 
.acc-content p{ 
margin: 10px; 
} 
.acc-content{ 
background-color: #222; 
opacity: 0.7; 
height: 0px; 
overflow: hidden; 
-webkit-transition: height 0.4s ease; 
-moz-transition: height 0.4s ease; 
-ms-transition: height 0.4s ease; 
-o-transition: height 0.4s ease; 
transition: height 0.4s ease; 
} 
.acc-content:target{ 
height: 170px; 
} 

Answer 4

잘 이해하면 첫 번째 클릭시 콘텐츠를 아약스에서로드 한 다음 토글 패널을 삭제하고 매번 AJAX에서 다시 검색하는 대신 숨길 것을 권장합니다 (각 클릭에 대기 시간이 없도록 적은 요청).

그래서 여기에 그 일을하는 방법 : 당신은 전직이 같은 HTML이있는 경우

$('.header').click(function() 
{ 
    var clickedHeader= $(this); 
    if (clickedHeader.next().is('.toggle:visible')) 
    { 
     clickedHeader.next().slideDown(800); 
    } 
    else if (clickedHeader.next().is('.toggle:hidden')) 
    { 
     clickedHeader.next().slideUp(800); 
    } 
    else 
    { 
     $.get(url, data, function(data) 
     { 
      // First do some treatment if needed... 
      clickedHeader.after('<div class="toggle" style="display:none;">'+data+'</div>'); 
      clickedHeader.next().slideDown(800); 
     }); 
    } 
}); 

이 작동합니다.

<div class="header">First header</div> 
<div class="header">Second header</div> 
<div class="header">Third header</div> 
<div class="header">Fourth header</div> 

각 헤더 다음에 '.toggle'클래스가있는 div를 토글합니다.

희망이 있습니다.