사이드메뉴 열고 접는 방법 질문
본문
안녕하세요
사이트 사이드 메뉴가 지금
메뉴
-서브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>