펼침목록 만들기... 채택완료
하늘그루터기
1년 전
조회 1,274
http://sir.kr/data/editor/2407/3068534878_1721660794.3154.png" width="100%" />
이렇게 만들어주실 분 계시나요??
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
미니님a
Expert
1년 전
아래 코드 사용 시 아래 움짤과 같은 결과를 얻을 수 있으며, 그 이외 내용은 직접 수정 하시길 바랍니다.
http://sir.kr/data/editor/2407/1935408078_1721692354.5069.gif" width="100%" />
</p>
<p><!DOCTYPE html></p>
<p><html lang="en"></p>
<p><head></p>
<p> <meta charset="UTF-8"></p>
<p> <meta name="viewport" content="width=device-width, initial-scale=1.0"></p>
<p> <title>Document</title></p>
<p> <script src="<a href="https://code.jquery.com/jquery-3.7.1.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-3.7.1.min.js"></script></a></p>
<p> <style></p>
<p> body {</p>
<p> font-family: Arial, sans-serif;</p>
<p> background-color: #f4f4f4;</p>
<p> margin: 0;</p>
<p> padding: 0;</p>
<p> }</p>
<p> .select {</p>
<p> width: 300px;</p>
<p> margin: 50px auto;</p>
<p> background-color: #fff;</p>
<p> border: 1px solid #ddd;</p>
<p> border-radius: 5px;</p>
<p> box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);</p>
<p> overflow: hidden;</p>
<p> }</p>
<p> .select_arrow {</p>
<p> margin-left: 10px;</p>
<p> transition: transform 0.3s;</p>
<p> }</p>
<p> .select p {</p>
<p> margin: 0;</p>
<p> padding: 15px;</p>
<p> background-color: #007bff;</p>
<p> color: #fff;</p>
<p> cursor: pointer;</p>
<p> display: flex;</p>
<p> justify-content: space-between;</p>
<p> align-items: center;</p>
<p> }</p>
<p> .select p img {</p>
<p> transition: transform 0.3s;</p>
<p> }</p>
<p> .select ul {</p>
<p> list-style: none;</p>
<p> margin: 0;</p>
<p> padding: 0;</p>
<p> display: none;</p>
<p> max-height: 252px;</p>
<p> overflow-y: auto;</p>
<p> }</p>
<p> .select ul li {</p>
<p> border-top: 1px solid #ddd;</p>
<p> }</p>
<p> .select ul li a {</p>
<p> display: block;</p>
<p> padding: 10px 15px;</p>
<p> color: #333;</p>
<p> text-decoration: none;</p>
<p> transition: background-color 0.3s;</p>
<p> }</p>
<p> .select ul li a:hover {</p>
<p> background-color: #f1f1f1;</p>
<p> }</p>
<p> </style></p>
<p> <script></p>
<p> $(document).ready(function(){</p>
<p> $('.select p').on('click', function(){</p>
<p> var ul = $(this).next('ul');</p>
<p> var arrow = $(this).find('.select_arrow');</p>
<p> if (ul.is(':visible')) {</p>
<p> ul.slideUp();</p>
<p> arrow.css('transform', 'rotate(0deg)');</p>
<p> } else {</p>
<p> ul.slideDown();</p>
<p> arrow.css('transform', 'rotate(180deg)');</p>
<p> }</p>
<p> });</p>
<p> });</p>
<p> </script></p>
<p></head></p>
<p><body></p>
<p> <div class="select"></p>
<p> <p>셀렉트 <span class="select_arrow">▼</span></p></p>
<p> <ul></p>
<p> <li><a href="<a href="http://www.naver.com"" target="_blank" rel="noopener noreferrer">http://www.naver.com"</a> target="_blank">Naver</a></li></p>
<p> <li><a href="<a href="http://www.google.com"" target="_blank" rel="noopener noreferrer">http://www.google.com"</a> target="_blank">Google</a></li></p>
<p> <li><a href="<a href="http://www.daum.net"" target="_blank" rel="noopener noreferrer">http://www.daum.net"</a> target="_blank">Daum</a></li></p>
<p> </ul></p>
<p> </div></p>
<p></body></p>
<p></html></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
하늘그루터기
1년 전
베스트 답변 감사합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인