토글(펼침) 메뉴에 관한 질문입니다. (js/jquery)

토글(펼침) 메뉴에 관한 질문입니다. (js/jquery)

QA

토글(펼침) 메뉴에 관한 질문입니다. (js/jquery)

답변 2

본문

 

안녕하세요.

오랜만에 질문 글 남깁니다.

잘 부탁드립니다.

 

 

펼침 메뉴를 만들었는데

아래와 같은 코드를 썼습니다.

 

 
$(".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) {
...
}




----------------------------

해결 했습니다. 감사합니다~

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 5
© SIRSOFT
현재 페이지 제일 처음으로