안녕하세요 클릭하면 아래 li가 열리고 닫기 누르면 li가 닫게 소스를
이곳저곳 뒤져서 만들고 있습니다.
밑으로 내려오면 "열린목록 닫기" 가 나오고
"열린목록 닫기" 를 누르면 li가 없어지면서 slideUp 되게 하고 싶습니다.
지금은 되기는 하는데... "열린목록 닫기"가 계속 따라 다니네요 ㅜ
소스는 아래와 같습니다.
Copy
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script><style> .menu a{cursor:pointer;} .menu .hide{display:none;}</style><script> $(document).ready(function(){ $(".menu>a").click(function(){ var submenu = $(this).next("ul"); if( submenu.is(":visible") ){ submenu.slideUp(); }else{ submenu.slideDown(); } }); $(".close").click(function(){ var submenu = $(this).prev("ul"); if( submenu.is(":visible") ){ submenu.slideUp(); } }); }); </script><div> <ul> <li class="menu"> <a>목록열기</a> <ul class="hide"> <li>메뉴1-1</li> <li>메뉴1-2</li> <li>메뉴1-3</li> <li>메뉴1-4</li> <li>메뉴1-5</li> <li>메뉴1-6</li> </ul> <div class="close"><a>열린목록 닫기</a></div> </li> </ul></div>hide를 주면 될 것 같긴한데.. 클릭했을때 안나오네요..ㅜ
|
답변 2개 / 댓글 1개
채택된 답변
+20 포인트
2016-06-09 (목) 20:46:21
Copy
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script><style>.menu a{cursor:pointer;}.menu .hide{display:none;}.menu .close { display:none; } /* 추가 */</style><script>$(document).ready(function(){ $(".menu>a").click(function(){ var submenu = $(this).next("ul"); if( submenu.is(":visible") ){ submenu.slideUp(); $('.close').hide(); /* 추가 */ } else { submenu.slideDown(); $('.close').show(); /* 추가 */ } }); $(".close").click(function(){ /* 제거 var submenu = $(this).prev("ul"); if( submenu.is(":visible") ){ submenu.slideUp(); } */ $('.menu > a').trigger('click'); /* 추가 */ });}); </script><div> <ul> <li class="menu"> <a>목록열기</a> <ul class="hide"> <li>메뉴1-1</li> <li>메뉴1-2</li> <li>메뉴1-3</li> <li>메뉴1-4</li> <li>메뉴1-5</li> <li>메뉴1-6</li> </ul> <div class="close"><a>열린목록 닫기</a></div> </li> </ul></div>질문 내용이 헷갈려서 이게 맞는지 모르겠네여;;
답변에 대한 댓글 1개
2016-06-09 (목) 20:41:36
Copy
$(function() { $(".menu a").on("click", function() { $(".hide").slideToggle("slow", function() { $(".close").toggle(); }); });});이렇게 하시고 .close { display:none; } 이렇게 한 줄 추가하면 되지 않을까요?
답변을 작성하려면 로그인이 필요합니다.