목록으로

목록 열고 닫기 질문드립니다. 채택완료

그누배우자 9년 전 조회 2,504

답변 2

안녕하세요 클릭하면 아래 li가 열리고 닫기 누르면 li가 닫게 소스를

이곳저곳 뒤져서 만들고 있습니다.

밑으로 내려오면 "열린목록 닫기" 가 나오고

"열린목록 닫기" 를 누르면 li가 없어지면서 slideUp 되게 하고 싶습니다.

지금은 되기는 하는데... "열린목록 닫기"가 계속 따라 다니네요 ㅜ

소스는 아래와 같습니다.

</p><p><script src="<a href='<a href="http://code.jquery.com/jquery-1.8.2.min.js" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-1.8.2.min.js</a>"></script'><a href="http://code.jquery.com/jquery-1.8.2.min.js" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-1.8.2.min.js</a>"></script</a>></p><p><style>
    .menu a{cursor:pointer;}
    .menu .hide{display:none;}
</style></p><p><script>
    $(document).ready(function(){
     
        $(".menu>a").click(function(){
         
            var submenu = $(this).next("ul");
            
            if( submenu.is(":visible") ){
                submenu.slideUp();
            }else{
                submenu.slideDown();
            }
            
        });</p><p>        $(".close").click(function(){
         
  var submenu = $(this).prev("ul");
     
  if( submenu.is(":visible") ){
   submenu.slideUp();</p><p>            }
        });
    });
    
</script></p><p><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></p><p>

hide를 주면 될 것 같긴한데.. 클릭했을때 안나오네요..ㅜ

#그누보드5

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

정렬:

채택된 답변

+20 포인트

나자신님

9년 전

</p><p><script src="<a href="<a href="http://code.jquery.com/jquery-1.8.2.min.js" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-1.8.2.min.js</a>"><a href="http://code.jquery.com/jquery-1.8.2.min.js" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-1.8.2.min.js</a></a>"></script></p><p><style></p><p>.menu a{cursor:pointer;}</p><p>.menu .hide{display:none;}</p><p>.menu .close { display:none; } /* 추가 */</p><p></style></p><p><script></p><p>$(document).ready(function(){</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>$(".menu>a").click(function(){</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>var submenu = $(this).next("ul");</p><p><span class="Apple-tab-span" style="white-space:pre">		</span></p><p><span class="Apple-tab-span" style="white-space:pre">		</span>if( submenu.is(":visible") ){</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>submenu.slideUp();</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>$('.close').hide(); /* 추가 */</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>} else {</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>submenu.slideDown();</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>$('.close').show(); /* 추가 */</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>}</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>});</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>$(".close").click(function(){</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>/* 제거</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>var submenu = $(this).prev("ul");</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>if( submenu.is(":visible") ){</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>submenu.slideUp();</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>}</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>*/</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>$('.menu > a').trigger('click'); /* 추가 */</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>});</p><p>});  </p><p></script></p><p><div></p><p><span class="Apple-tab-span" style="white-space:pre">	</span><ul></p><p><span class="Apple-tab-span" style="white-space:pre">		</span><li class="menu"></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><a>목록열기</a></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><ul class="hide"></p><p><span class="Apple-tab-span" style="white-space:pre">				</span><li>메뉴1-1</li></p><p><span class="Apple-tab-span" style="white-space:pre">				</span><li>메뉴1-2</li></p><p><span class="Apple-tab-span" style="white-space:pre">				</span><li>메뉴1-3</li></p><p><span class="Apple-tab-span" style="white-space:pre">				</span><li>메뉴1-4</li></p><p><span class="Apple-tab-span" style="white-space:pre">				</span><li>메뉴1-5</li></p><p><span class="Apple-tab-span" style="white-space:pre">				</span><li>메뉴1-6</li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span></ul></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><div class="close"><a>열린목록 닫기</a></div></p><p><span class="Apple-tab-span" style="white-space:pre">		</span></li></p><p><span class="Apple-tab-span" style="white-space:pre">	</span></ul></p><p></div></p><p>

질문 내용이 헷갈려서 이게 맞는지 모르겠네여;;

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�

그누배우자

9년 전

감사합니다. 헤매고 있었는데 많이 배웠습니다.^^

댓글을 작성하려면 로그인이 필요합니다.

쟁반짜장

9년 전

</p><p>$(function() {
    $(".menu a").on("click", function() {
        $(".hide").slideToggle("slow", function() {
            $(".close").toggle();
        });
    });
});</p><p>

이렇게 하시고 .close { display:none; } 이렇게 한 줄 추가하면 되지 않을까요?

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

목록 열고 닫기 질문드립니다. 채택완료

답변 2개

답변에 대한 댓글 1개

공유하기