Jquery 아코디언 최소
개발 환경
docker,vscode
오늘은 jquery에서 아코디언을 만들고 싶습니다.
아코디언이란 아래 동영상을 시청하세요.
비동기로 조작으로 할 수 있다고 생각합니다.
이번에는 Laravel을 사용하여 작성합니다.
먼저 resource 폴더에 top.blade.index를 만듭니다.
top.blade.php
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link href = "css/hoge.css" rel = "stylesheet" type = "text/css">
</head>
<body>
<ul class = "faqs">
<li class = "faq">
<h1 class = "question">Windowsでも受講できますか</h1>
<span>+</span>
<div class = "answer">
<p>Windowsでも受講は可能ですがMacをおすすめします</p>
</div>
</li>
<li class = "faq">
<h1 class = "question">年齢制限はありますか?</h1>
<span>+</span>
<div class = "answer">
<p>年齢制限は特にありません</p>
</div>
</li>
</ul>
<script src = "{{asset('js/hoge.js')}}"></script>
</body>
이렇게 css 파일을 읽습니다.
그런 다음 공개 폴더에 CSS 파일을 만듭니다.
hoge.css
.faqs{
margin:10px;
border-bottom:1px solid #ccc;
position:relative;
cursor:pointer;
text-align: left;
}
.faq{
cursor:pointer;
}
.answer{
display:none;
}
그런 다음 public 폴더에 js 파일을 로드합니다.
hoge.js
$('.faq').click(function(){
var $answer = $(this).find('.answer');
if($answer.hasClass('open')){
$answer.removeClass('open');
$answer.slideUp();
$(this).find('span').text('+');
}else{
$answer.addClass('open');
$answer.slideDown('open');
$(this).find('span').text('-');
}
});
완성
Reference
이 문제에 관하여(Jquery 아코디언 최소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hyurai_/items/8779c5ea207bcf68adb6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
