아래는 마우스를 올리면 하위 카테고리가 보이게 하는 소스입니다.
문제는 메뉴가 여러개인데 하위 카테고리가 한번에 열리네요. 해당 메뉴의 하위 메뉴만 보이게 하려면 어떨게 해야 할까요?
<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개 / 댓글 5개
채택된 답변
+20 포인트
4년 전
html 소스를보지못해서 직접적인답변은드릴수없지만
Copy
$(this).parent().find('li.menu2021 ul').slideDown(500);이부분을
Copy
var index = $('li.menu2021').index(this);
$(this).parent().find('li.menu2021 ul:eq(' + index + ')').slideDown(500);이렇게해보세요
안되시면 댓글로 html소스기재해주세요.
답변에 대한 댓글 5개
4년 전
Phillips
4년 전
$('li.menu2021').hover(function(){
여기 밑에줄에다가
$('li.menu2021 ul').hide();
이거나
$('li.menu2021 ul').slideUp(500); 를붙어주세요.
여기 밑에줄에다가
$('li.menu2021 ul').hide();
이거나
$('li.menu2021 ul').slideUp(500); 를붙어주세요.
4년 전
말씀하신대로 했더니 되는듯 하면서 약간 에러가 있습니다.
아래가 소스입니다. 그냥 자바 스크립트 사용안하고 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>
아래가 소스입니다. 그냥 자바 스크립트 사용안하고 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>
답변을 작성하려면 로그인이 필요합니다.
그런데, 예를들어 제품소개를 클릭해서 하위 카테고리가 열린 상태에서 회사소개를 클릭하면 제품소개 하위카테고리가 닫혔으면 합니다.