아코디언 메뉴를 사용중인데요..
<ul> <!--1번 ul -->
<li class="active">test</li>
</ul>
<ul> <!--2번 ul -->
<li>test</li>
</ul>
이런식으로 되어있습니다.
li안에 .active 활성화시
딸려 있는 1번 ul 에만 display:block 을 줄 수 가 있나요?
밑에 있는 2번 ul은 영향이 없구요...
|
답변 2개 / 댓글 5개
채택된 답변
+20 포인트
조나단입니다
2020-01-27 (월) 22:55:52
li에 active를 주는 스크립트 소스가 있을텐데
1번 ul과 2번 ul을 클래스를 따로 선언하시어서 1번 클래스에만 아코디언이 적용되도록 하셔야 할 것 같습니다.
자세한건 소스를 봐야 알 수 있겠네요
답변에 대한 댓글 5개
그누배우자
2020-01-27 (월) 23:01:46
조나단입니다
2020-01-27 (월) 23:07:02
아코디언 메뉴 자바스크립트로 보여주세요 한번 봐볼게요
저 소스는 현재 메뉴를 출력하는 부분이고,
이벤트가 발생할때 active가 추가되도록 하는부분은 자바스크립트쪽에 있을것 같네요
저 소스는 현재 메뉴를 출력하는 부분이고,
이벤트가 발생할때 active가 추가되도록 하는부분은 자바스크립트쪽에 있을것 같네요
그누배우자
2020-01-27 (월) 23:12:11
<div id="accordian">
<ul>
<?php
$menu_datas2 = get_menu2_db(0, true);
$gnb_zindex = 999; // gnb_1dli z-index 값 설정용
$i = 0;
foreach( $menu_datas2 as $row ){
if( empty($row) ) continue;
?>
<li>
<h4><img src="<?php echo $row['me_img'] ?>"><?php echo $row['me_name'] ?><i class="fa fa-chevron-down ico_ar"></i></h4>
<?php
$k = 0;
foreach( (array) $row['sub'] as $row2 ){
if( empty($row2) ) continue;
if($k == 0)
echo '<ul>'.PHP_EOL;
?>
<?php if ($txt == $row2['me_name']) { ?>
<li><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="color_02"><?php echo $row2['me_name'] ?></a></li>
<?php } else { ?>
<li><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>"><?php echo $row2['me_name'] ?></a></li>
<?php } ?>
<?php
$k++;
} //end foreach $row2
if($k > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
$i++;
} //end foreach $row
if ($i == 0) { ?>
<li class="gnb_empty">왼쪽 메뉴 준비 중입니다.<?php if ($is_admin) { ?> <a href="<?php echo G5_ADMIN_URL; ?>/menu_list2.php">관리자모드 > 환경설정 > 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>
<?php } ?>
</ul>
</div>
<script>
$(function(){
$("#accordian h4").click(function(){
$("#accordian ul ul").slideUp();
$('.ico_ar').css('transform','none');
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
$(this).find('.ico_ar:eq(0)').css('transform','rotate(180deg)');
}
})
})
</script>
풀소스입니다. ㅠ
<ul>
<?php
$menu_datas2 = get_menu2_db(0, true);
$gnb_zindex = 999; // gnb_1dli z-index 값 설정용
$i = 0;
foreach( $menu_datas2 as $row ){
if( empty($row) ) continue;
?>
<li>
<h4><img src="<?php echo $row['me_img'] ?>"><?php echo $row['me_name'] ?><i class="fa fa-chevron-down ico_ar"></i></h4>
<?php
$k = 0;
foreach( (array) $row['sub'] as $row2 ){
if( empty($row2) ) continue;
if($k == 0)
echo '<ul>'.PHP_EOL;
?>
<?php if ($txt == $row2['me_name']) { ?>
<li><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="color_02"><?php echo $row2['me_name'] ?></a></li>
<?php } else { ?>
<li><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>"><?php echo $row2['me_name'] ?></a></li>
<?php } ?>
<?php
$k++;
} //end foreach $row2
if($k > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
$i++;
} //end foreach $row
if ($i == 0) { ?>
<li class="gnb_empty">왼쪽 메뉴 준비 중입니다.<?php if ($is_admin) { ?> <a href="<?php echo G5_ADMIN_URL; ?>/menu_list2.php">관리자모드 > 환경설정 > 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>
<?php } ?>
</ul>
</div>
<script>
$(function(){
$("#accordian h4").click(function(){
$("#accordian ul ul").slideUp();
$('.ico_ar').css('transform','none');
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
$(this).find('.ico_ar:eq(0)').css('transform','rotate(180deg)');
}
})
})
</script>
풀소스입니다. ㅠ
조나단입니다
2020-01-27 (월) 23:21:52
추정하건데..
$("#accordian ul ul.active").click(function(){
//원하는 것 display : block; 처리
})
이걸 원하시는게 아닐까 싶습니다.. 더 도움드리고 싶지만 주어진것중에서 제가 드릴수있는 최선의 답변은 여기까지 인것같습니다. 다른분들이 더 좋은 답을 남겨주시지 않을까 생각합니다.
사이트 주소와 해당되는부분의 소스를 남겨주시면 다른분들이 답변드리는데 훨씬 수월할거에요
$("#accordian ul ul.active").click(function(){
//원하는 것 display : block; 처리
})
이걸 원하시는게 아닐까 싶습니다.. 더 도움드리고 싶지만 주어진것중에서 제가 드릴수있는 최선의 답변은 여기까지 인것같습니다. 다른분들이 더 좋은 답을 남겨주시지 않을까 생각합니다.
사이트 주소와 해당되는부분의 소스를 남겨주시면 다른분들이 답변드리는데 훨씬 수월할거에요
DSLOVE
2020-01-28 (화) 13:10:16
css 우선순위로 제어를 할 수 있는데요.
작업된 url 을 보여주시면 정확한 답변 가능합니다.
예측으론
ul > li.active {display:block;}
이런식으로 제일 처음것에만 적용할 수 있는 우선순위로 작업하시면 됩니다.
ul 도 첫번째 조건을 ul:first-child 혹은 그 윗 부모의 class 에 > 이걸 우선순위로도 둘 수 있습니다.
답변을 작성하려면 로그인이 필요합니다.
$k = 0;
foreach( (array) $row['sub'] as $row2 ){
if( empty($row2) ) continue;
if($k == 0)
echo '<ul>'.PHP_EOL;
?>
<?php if ($txt == $row2['me_name']) { ?>
<li><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="color_02"><?php echo $row2['me_name'] ?></a></li>
<?php } else { ?>
<li><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>"><?php echo $row2['me_name'] ?></a></li>
<?php } ?>
<?php
$k++;
} //end foreach $row2
if($k > 0)
echo '</ul>'.PHP_EOL;
?>
이렇게 해서 메뉴 활성화 중입니다..ㅠ