css 문의드립니다.

css 문의드립니다.

QA

css 문의드립니다.

본문

아코디언 메뉴를 사용중인데요..

 

<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

li에 active를 주는 스크립트 소스가 있을텐데

 

1번 ul과 2번 ul을 클래스를 따로 선언하시어서 1번 클래스에만 아코디언이 적용되도록 하셔야 할 것 같습니다.

 

자세한건 소스를 봐야 알 수 있겠네요

<?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;
                    ?>

이렇게 해서 메뉴 활성화 중입니다..ㅠ

아코디언 메뉴 자바스크립트로 보여주세요 한번 봐볼게요
저 소스는 현재 메뉴를 출력하는 부분이고,

이벤트가 발생할때  active가 추가되도록 하는부분은 자바스크립트쪽에 있을것 같네요

<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">관리자모드 &gt; 환경설정 &gt; 메뉴설정</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>

풀소스입니다. ㅠ

추정하건데..

$("#accordian ul ul.active").click(function(){
//원하는 것 display : block; 처리
})

이걸 원하시는게 아닐까 싶습니다.. 더 도움드리고 싶지만 주어진것중에서 제가 드릴수있는 최선의 답변은 여기까지 인것같습니다. 다른분들이 더 좋은 답을 남겨주시지 않을까 생각합니다.

사이트 주소와 해당되는부분의 소스를 남겨주시면 다른분들이 답변드리는데 훨씬 수월할거에요

css 우선순위로 제어를 할 수 있는데요.

작업된 url 을 보여주시면 정확한 답변 가능합니다.

예측으론

ul > li.active {display:block;}

이런식으로 제일 처음것에만 적용할 수 있는 우선순위로 작업하시면 됩니다.

ul 도 첫번째 조건을 ul:first-child 혹은 그 윗 부모의 class 에 > 이걸 우선순위로도 둘 수 있습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 123,164 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT