토글(펼침) 메뉴에 관한 질문입니다. (js/jquery)
본문
안녕하세요.
오랜만에 질문 글 남깁니다.
잘 부탁드립니다.
펼침 메뉴를 만들었는데
아래와 같은 코드를 썼습니다.
$(".acco1 dt").click(function() {
$(".acco1 dd").slideToggle("slow");
});
$(".acco2 dt").click(function() {
$(".acco2 dd").slideToggle("slow");
});
$(".acco3 dt").click(function() {
$(".acco3 dd").slideToggle("slow");
});
$(".acco4 dt").click(function() {
$(".acco4 dd").slideToggle("slow");
});
질문은 두가지 입니다.
1. 위와 같이 나열된 같은 내용의 코드를 더 짧게 줄일 수 있나요?
2. 위의 펼침 메뉴를 특정 사이즈 이하(예: 768px 이하) 일 때만 적용할 수 있는 방법이 있나요?
감사합니다.
답변 2
<dl class='acco1'><dd>1</dd><dt>2</dt></dl>
<dl class='acco2'><dd>1</dd><dt>2</dt></dl>
<dl class='acco3'><dd>1</dd><dt>2</dt></dl>
<dl class='acco4'><dd>1</dd><dt>2</dt></dl>
이런형태겠죠??
이걸
<dl class='acco1 slidedl'><dd>1</dd><dt>2</dt></dl>
<dl class='acco2 slidedl'><dd>1</dd><dt>2</dt></dl>
<dl class='acco3 slidedl'><dd>1</dd><dt>2</dt></dl>
<dl class='acco4 slidedl'><dd>1</dd><dt>2</dt></dl>
로 slidedl 이라는 클래스를 하나 더 추가해줍니다.
그리고 나서 스크립트에
$(".slidedl dt").click(function() {
$(this).parent().find("dd").slideToggle("slow");
});
정말 감사합니다 ^^
아는 분들에겐 정말 간단한 코딩일지 몰라도,
ㅠ ㅠ 저같이 퍼다가 아이디나 클래스만 변경하는 사람들에게는 정말 어렵습니다 ㅠ ㅠ
짧게 줄이는 것은 알려주신대로 처리하였습니다 ^^
행복동님이 2번째 질의에 답변을 안남기셔서..
if ($(window).width() <= 768) {
...
}
window 대신 document 나 body, 또는 element name 으로 지정하셔도 됩니다.
답변 감사합니다 (__)
행복동님이 알려주신 아래의 내용을
$(".slidedl dt").click(function() {
$(this).parent().find("dd").slideToggle("slow");
});
카츠님이 알려주신 아래 코드 ... 부분에 넣으면 되나요?
if ($(window).width() <= 768) {
...
}
----------------------------
해결 했습니다. 감사합니다~