사이드메뉴 열고 접는 방법 질문

사이드메뉴 열고 접는 방법 질문

QA

사이드메뉴 열고 접는 방법 질문

본문

안녕하세요 

 

사이트 사이드 메뉴가 지금 

메뉴
-서브1

-서브1

이런식으로 펼쳐진 상태로 나오는데 이걸 열고 접을수 있도록 만들고 싶습니다.

                <li>
                    <a href="<?php echo $me['href'];?>" class="line <?php echo ($me['on']) ? 'active' : ''; ?>" target="<?php echo $me['target'];?>">
                        <i class="fa <?php echo $me['icon'] ?> fa-fw" aria-hidden="true"></i>
                        <?php echo $me['text'];?>
                    </a>
                    <?php if(isset($me['s'])) { //Is Sub Menu ?>
                        <ul>
                        <?php for($j=0; $j < count($me['s']); $j++) {
                                $me1 = $me['s'][$j];
                        ?>
                            <li>
                                <a href="<?php echo $me1['href'];?>" class="<?php echo ($me1['on']) ? 'active' : ''; ?>" target="<?php echo $me1['target'];?>">
                                    <i class="fa <?php echo $me1['icon'] ?> fa-fw" aria-hidden="true"></i>
                                    <?php echo $me1['text'];?>
                                </a>
                            </li>


코드는 이렇게 설정되어있는데 ($me['on']) ? 'active' : ''; ? 이부분을($me['on']) ? 'on' : 'off'; ? 로 바꾸어서 해보아도 그대로 입니다. 

어떻게 해야할까요 ㅠㅠ 고수님들 도와주세요

이 질문에 댓글 쓰기 :

답변 1

다음 코드가 도움이 될지 모르겠습니다.


<style>
.test ul {
    list-style-type: none;
}
.test ul li label.toggles {
    margin-left: -1em;
}
.test ul li label.toggles input[type="checkbox"] {
    opacity: 0;
    margin-left: -1em;
}
.test ul li label.toggles::before {
    content: '-';
    font-family: Courier;
}
.test ul li:has(ul) > label.toggles:has(input[type="checkbox"]:checked)::before {
    content: '+';
}
.test ul li:has(ul) > label.toggles:has(input[type="checkbox"]:checked) ~ ul {
    display: none;
}
.test ul li:has(ul) > label.toggles input[type="checkbox"] {
    cursor: pointer;
}
</style>
 
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function () {
    $('nav ul li').prepend('<label class="toggles"><input type="checkbox"></label>');
});
</script>
 
<nav class="test">
            <ul>
                <li>
                    <a href="#" class="line" target="">
                        <i class="fa  fa-fw" aria-hidden="true"></i>
                        text
                    </a>
                </li>
                <li>
                    <a href="#" class="line" target="">
                        <i class="fa  fa-fw" aria-hidden="true"></i>
                        text
                    </a>
                    <ul>
                        <li>
                            <a href="#" class="" target="">
                                <i class="fa  fa-fw" aria-hidden="true"></i>
                                text
                            </a>
                        </li>
                        <li>
                            <a href="#" class="" target="">
                                <i class="fa  fa-fw" aria-hidden="true"></i>
                                text
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="line" target="">
                        <i class="fa  fa-fw" aria-hidden="true"></i>
                        text
                    </a>
                </li>
                <li>
                    <a href="#" class="line" target="">
                        <i class="fa  fa-fw" aria-hidden="true"></i>
                        text
                    </a>
                    <ul>
                        <li>
                            <a href="#" class="" target="">
                                <i class="fa  fa-fw" aria-hidden="true"></i>
                                text
                            </a>
                            <ul>
                                <li>
                                    <a href="#" class="" target="">
                                        <i class="fa  fa-fw" aria-hidden="true"></i>
                                        text
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
</nav>
답변을 작성하시기 전에 로그인 해주세요.
전체 17
QA 내용 검색

회원로그인

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