도움부탁드립니다.
본문
아래는 마우스를 올리면 하위 카테고리가 보이게 하는 소스입니다.
문제는 메뉴가 여러개인데 하위 카테고리가 한번에 열리네요. 해당 메뉴의 하위 메뉴만 보이게 하려면 어떨게 해야 할까요?
<script type="text/javascript">
$( document ).ready( function() {
$('li.menu2021 ul').hide();
$('li.menu2021').hover(function(){
$(this).parent().find('li.menu2021 ul').slideDown(500);
$(this).parent().hover(function(){
},function(){
$(this).parent().find('li.menu2021 ul').slideUp(500);
})
});
});
</script>
답변 1
html 소스를보지못해서 직접적인답변은드릴수없지만
$(this).parent().find('li.menu2021 ul').slideDown(500);
이부분을
var index = $('li.menu2021').index(this);
$(this).parent().find('li.menu2021 ul:eq(' + index + ')').slideDown(500);
이렇게해보세요
안되시면 댓글로 html소스기재해주세요.
감사합니다. 잘되네요.
그런데, 예를들어 제품소개를 클릭해서 하위 카테고리가 열린 상태에서 회사소개를 클릭하면 제품소개 하위카테고리가 닫혔으면 합니다.
$('li.menu2021').hover(function(){
여기 밑에줄에다가
$('li.menu2021 ul').hide();
이거나
$('li.menu2021 ul').slideUp(500); 를붙어주세요.
말씀하신대로 했더니 되는듯 하면서 약간 에러가 있습니다.
아래가 소스입니다. 그냥 자바 스크립트 사용안하고 transition을 아래<li></li>안에 넣으려고 하니 잘 안되네요. 어디에 적용해야 하나요(자연스럽게 나오려면요)
<script type="text/javascript">
$( document ).ready( function() {
$('li.menu2021').hover(function(){
$('li.menu2021 ul').hide();
var index = $('li.menu2021').index(this);
$(this).parent().find('li.menu2021 ul:eq(' + index + ')').slideDown(500);
$(this).parent().hover(function(){
},function(){
$(this).parent().find('li.menu2021 ul').slideUp(500);
})
});
});
</script>
<li class="nav-item dropdown menu2021">
<a class="nav-link dropdown-toggle ks4 f16" href="<?php echo $row['me_link']; ?>" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" target="_<?php echo $row['me_target']; ?>">
<?php echo $row['me_name'] ?>
</a>
<!-- 서브 -->
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
<?php
// 하위 분류
$k = 0;
foreach( (array) $row['sub'] as $row2 ){
if( empty($row2) ) continue;
?>
<a class="dropdown-item ks4 f15 fw4" href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>"><?php echo $row2['me_name'] ?></a>
<?php
$k++;
} //end foreach $row2
if($k > 0)
echo '</ul>'.PHP_EOL;
?>
<?php }else{?>
<li class="nav-item">
<a class="nav-link en2 f16" href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>"><?php echo $row['me_name'] ?></a>
</li>
<?php }?>
</li>
부분소스인거같은데 전체적인소스를 주세요............ 아니면링크를주시던가요
감사합니다. 링크를 드려야 하는데 사정이 있어서... 하지만 많은 도움이 되었습니다.
