더보기 버튼 응용? 이랄까.. 채택완료
ul 안에 li로 리스트를 뿌려주는데 리스트가 30개정도 됩니다.
들어가는 내용의 값도 전부 다르구요.
그래서 손코딩을 스크립트 짜주실분 구합니다!
1. 버튼 클릭시 li를 7개씩 추가로 노출
2. ul을 여러개로 나누어 클래스에 숫자를 붙여 버튼 클릭시 클래스i 에 클래스를 붙여(혹은 css 추가) 노출
ul 클래스 .faq
버튼 클래스 .more
답변 3개
채택된 답변
+20 포인트
3년 전
Copy
제목1내용1
제목2내용2
제목3내용3
제목4내용4
제목5내용5
제목6내용6
제목7내용7
제목8내용8
제목9내용9
제목10내용10
제목11내용11
제목12내용12
제목13내용13
제목14내용14
제목15내용15
제목16내용16
제목17내용17
제목18내용18
제목19내용19
제목20내용20
제목21내용21
제목22내용22
제목23내용23
제목24내용24
제목25내용25
제목26내용26
제목27내용27
제목28내용28
제목29내용29
제목30내용30
더보기
처음으로
cut = 7;
li = fag.getElementsByTagName("li");
moreBtn.onclick = function() {
for (i = 0; i li.length; i++) li[i].style.display = "none";
count = count == Math.ceil(li.length / cut) ? 1 : count + 1;
for (j = 0; j count * cut; j++) if (li[j] !== undefined) li[j].style.display = "block";
}
startBtn.onclick = function() {
count = 0;
for (i = 0; i li.length; i++) li[i].style.display = "none";
}
startBtn.onclick();
로그인 후 평가할 수 있습니다
답변에 대한 댓글 5개
moonlight205
3년 전
3년 전
[code]
<ul id="fag" class="faq">
<li><h2>제목1</h2><p>내용1</p></li>
<li><h2>제목2</h2><p>내용2</p></li>
<li><h2>제목3</h2><p>내용3</p></li>
<li><h2>제목4</h2><p>내용4</p></li>
<li><h2>제목5</h2><p>내용5</p></li>
<li><h2>제목6</h2><p>내용6</p></li>
<li><h2>제목7</h2><p>내용7</p></li>
<li><h2>제목8</h2><p>내용8</p></li>
<li><h2>제목9</h2><p>내용9</p></li>
<li><h2>제목10</h2><p>내용10</p></li>
<li><h2>제목11</h2><p>내용11</p></li>
<li><h2>제목12</h2><p>내용12</p></li>
<li><h2>제목13</h2><p>내용13</p></li>
<li><h2>제목14</h2><p>내용14</p></li>
<li><h2>제목15</h2><p>내용15</p></li>
<li><h2>제목16</h2><p>내용16</p></li>
<li><h2>제목17</h2><p>내용17</p></li>
<li><h2>제목18</h2><p>내용18</p></li>
<li><h2>제목19</h2><p>내용19</p></li>
<li><h2>제목20</h2><p>내용20</p></li>
<li><h2>제목21</h2><p>내용21</p></li>
<li><h2>제목22</h2><p>내용22</p></li>
<li><h2>제목23</h2><p>내용23</p></li>
<li><h2>제목24</h2><p>내용24</p></li>
<li><h2>제목25</h2><p>내용25</p></li>
<li><h2>제목26</h2><p>내용26</p></li>
<li><h2>제목27</h2><p>내용27</p></li>
<li><h2>제목28</h2><p>내용28</p></li>
<li><h2>제목29</h2><p>내용29</p></li>
<li><h2>제목30</h2><p>내용30</p></li>
</ul>
<div id="moreBtn" class="moreBtn" style=cursor:pointer>더보기</div>
<script>
cut = 7;
li = fag.getElementsByTagName("li");
moreBtn.onclick = function() {
for (i = 0; i < li.length; i++) li[i].style.display = "none";
count = count == Math.ceil(li.length / cut) ? 1 : count + 1;
for (j = 0; j < count * cut; j++) if (li[j] !== undefined) li[j].style.display = "block";
}
count = 0;
moreBtn.onclick();
</script>
[/code]
<ul id="fag" class="faq">
<li><h2>제목1</h2><p>내용1</p></li>
<li><h2>제목2</h2><p>내용2</p></li>
<li><h2>제목3</h2><p>내용3</p></li>
<li><h2>제목4</h2><p>내용4</p></li>
<li><h2>제목5</h2><p>내용5</p></li>
<li><h2>제목6</h2><p>내용6</p></li>
<li><h2>제목7</h2><p>내용7</p></li>
<li><h2>제목8</h2><p>내용8</p></li>
<li><h2>제목9</h2><p>내용9</p></li>
<li><h2>제목10</h2><p>내용10</p></li>
<li><h2>제목11</h2><p>내용11</p></li>
<li><h2>제목12</h2><p>내용12</p></li>
<li><h2>제목13</h2><p>내용13</p></li>
<li><h2>제목14</h2><p>내용14</p></li>
<li><h2>제목15</h2><p>내용15</p></li>
<li><h2>제목16</h2><p>내용16</p></li>
<li><h2>제목17</h2><p>내용17</p></li>
<li><h2>제목18</h2><p>내용18</p></li>
<li><h2>제목19</h2><p>내용19</p></li>
<li><h2>제목20</h2><p>내용20</p></li>
<li><h2>제목21</h2><p>내용21</p></li>
<li><h2>제목22</h2><p>내용22</p></li>
<li><h2>제목23</h2><p>내용23</p></li>
<li><h2>제목24</h2><p>내용24</p></li>
<li><h2>제목25</h2><p>내용25</p></li>
<li><h2>제목26</h2><p>내용26</p></li>
<li><h2>제목27</h2><p>내용27</p></li>
<li><h2>제목28</h2><p>내용28</p></li>
<li><h2>제목29</h2><p>내용29</p></li>
<li><h2>제목30</h2><p>내용30</p></li>
</ul>
<div id="moreBtn" class="moreBtn" style=cursor:pointer>더보기</div>
<script>
cut = 7;
li = fag.getElementsByTagName("li");
moreBtn.onclick = function() {
for (i = 0; i < li.length; i++) li[i].style.display = "none";
count = count == Math.ceil(li.length / cut) ? 1 : count + 1;
for (j = 0; j < count * cut; j++) if (li[j] !== undefined) li[j].style.display = "block";
}
count = 0;
moreBtn.onclick();
</script>
[/code]
moonlight205
3년 전
답변 진심으로 감사드립니다!
헌대 맨 마지막리스트 이후 버튼 클릭시 다시 처음으로 돌아가네요..
맨마지막 리스트 노출 후 버튼삭제로 수정 요청드려도 될까요..?
정말 감사드립니다 ㅠ_ㅠ..
헌대 맨 마지막리스트 이후 버튼 클릭시 다시 처음으로 돌아가네요..
맨마지막 리스트 노출 후 버튼삭제로 수정 요청드려도 될까요..?
정말 감사드립니다 ㅠ_ㅠ..
3년 전
답변채택부터 해 주시고 새로운 질문으로 올려주세요.^^
원하는 것을 그림 등으로 그려서 상세히 설명해 주세요.
수정해 드릴 때마다 또 새로운 걸 요구하시니 저도 진이 빠집니다.
원하는 것을 그림 등으로 그려서 상세히 설명해 주세요.
수정해 드릴 때마다 또 새로운 걸 요구하시니 저도 진이 빠집니다.
moonlight205
3년 전
죄송합니다 ㅠ_ㅠ.. 채택했습니다!
앞으론 한번에 이해될 수 있도록 글 정리해서 남기도록 하겠습니다 ㅠ_ㅠ..
앞으론 한번에 이해될 수 있도록 글 정리해서 남기도록 하겠습니다 ㅠ_ㅠ..
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
moonlight205
3년 전
<ul class="faq">
<li>
<h2>제목</h2>
<p>내용</p>
</li>
<li>
<h2>제목</h2>
<p>내용</p>
</li>
</ul>
<div class="moreBtn">더보기</div>
기본적인 형식으로 코딩했습니다!
위의 코딩에서 li 갯수가 30개정도 되구요.
더보기 버튼 클릭 시 li가 7개씩 노출되는 형식이면 좋을것같습니다!
<li>
<h2>제목</h2>
<p>내용</p>
</li>
<li>
<h2>제목</h2>
<p>내용</p>
</li>
</ul>
<div class="moreBtn">더보기</div>
기본적인 형식으로 코딩했습니다!
위의 코딩에서 li 갯수가 30개정도 되구요.
더보기 버튼 클릭 시 li가 7개씩 노출되는 형식이면 좋을것같습니다!
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 2개
moonlight205
3년 전
아 제가 글을 정리하다가 저부분이 이상하게 써졌네요!
손코딩은 되어있고, 스크립트만 필요합닏다!
제이쿼리는 나쁘지 않은데 자바스크립트가 좀 서툴러서요..
손코딩은 되어있고, 스크립트만 필요합닏다!
제이쿼리는 나쁘지 않은데 자바스크립트가 좀 서툴러서요..
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
1. '처음으로' 버튼 삭제 (버튼을 넣지않으면 작동하지 않습니다.)
2. 처음엔 7개의 리스트가 노출되었으면 합니다. (처음부터 아무 리스트도 노출되지 않습니다.)
감사합니다!