jQuery 메뉴트리 이벤트
JS/jQuery 2017. 3. 27. 15:13 |JQuery 메뉴트리
<head>
<script type="text/javascript">
$(document).ready(function () {
//상위 메뉴
$("ul.sidemenu li.firstOff, ul.sidemenu li.firstOn").click(function (e) {
var data = $(this).data();
if (menuChildMenuCnt < 1) {
doPageMove();
return;
}
if ($(this).hasClass("firstOff")) {
$(this).removeClass("firstOff").addClass("firstOn");
$(this).find("ul:first").removeClass("hide").addClass("show");
}
else {
$(this).removeClass("firstOn").addClass("firstOff");
$(this).find("ul:first").removeClass("show").addClass("hide");
}
doPageMove();
});
// 하위 메뉴 ON, OFF
$("ul.sidemenu li.secondOff, ul.sidemenu li.secondOn, ul.sidemenu li.secondOut").click(function (e) {
var data = $(this).data();
if (menuChildMenuCnt < 1) {
doPageMove();
return;
}
doPageMove();
});
//메뉴 클릭시 이벤트
function doPageMove() {
alert("메뉴트리")
})
;
</script>
</head>
<div class="lnb">
<ul class="sidemenu">
<li class="firstOn">
<a href="javascript:void(0);"><b>상위</b></a>
<ul class="show">
<#list 201701..201705 as item>
<li class="secondOut">
<a href="javascript:void(0);">하위1</a>
</li>
<li class="secondOut">
<a href="javascript:void(0);">하위2</a>
</li>
<li class="secondOut">
<a href="javascript:void(0);">하위3</a>
</li>
</ul>
</li>
</ul>
</div>
페이지 이동할 경우엔 doPageMove 함수에 정의해주면 된다.
'JS > jQuery' 카테고리의 다른 글
| jQuery append, prepend (0) | 2015.08.13 |
|---|---|
| jQuery each() 반복문 (0) | 2015.08.13 |