목록 열고 닫기 질문드립니다.
본문
안녕하세요 클릭하면 아래 li가 열리고 닫기 누르면 li가 닫게 소스를
이곳저곳 뒤져서 만들고 있습니다.
밑으로 내려오면 "열린목록 닫기" 가 나오고
"열린목록 닫기" 를 누르면 li가 없어지면서 slideUp 되게 하고 싶습니다.
지금은 되기는 하는데... "열린목록 닫기"가 계속 따라 다니네요 ㅜ
소스는 아래와 같습니다.
<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
<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>
질문 내용이 헷갈려서 이게 맞는지 모르겠네여;;
감사합니다. 헤매고 있었는데 많이 배웠습니다.^^
$(function() {
$(".menu a").on("click", function() {
$(".hide").slideToggle("slow", function() {
$(".close").toggle();
});
});
});
이렇게 하시고 .close { display:none; } 이렇게 한 줄 추가하면 되지 않을까요?
답변을 작성하시기 전에 로그인 해주세요.
