現在地表示は、サイドナビをくくるdivのIDとリストのclassが同じものを現在地表示するように作っています。
五階層まであります。現在地表示は最初から開いた状態で表示されます。
JSを読み込みます
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript" src="js/main.js"></script>
[main.js]JavaScript
jQuery(function($){ //sidenav_current_class $(function(){ var id = $(".mod_section_box_side_nav").attr("id"); $(".mod_section_box_side_nav ul li."+id).addClass("current"); }); //sidenav_dropdown $(function(){ var nav = $(".mod_section_box_side_nav"); var navlink = nav.find("ul li a"); $(navlink).each(function() { if($("+ul",this).size()){ $(this).addClass("parent"); }else{ } }); var navlinkbtn = nav.find("ul li a.parent"); $("+ul",navlinkbtn).css("display","none"); var navlink_current = nav.find("ul li.current"); $(navlink_current).parents("ul").css("display","block"); $(navlinkbtn).click(function(){ //alert('クリック!'); if($("+ul",this).css("display")=="none"){ $("+ul",this).slideDown("fast"); }else{ $("+ul",this).slideUp("fast"); } return false; }); }); });
HTMl
<!-- 現在地表示のidは↓ココで指定 --> <div id="pagenum01-01-03" class="mod_section_box_side_nav"> <p class="category"><a href="">第二階層タイトル</a></p> <ul> <li class="pagenum01"><a href="">第三階層下層あり</a> <ul> <li class="pagenum01-01"><a href="">第四階層下層あり</a> <ul> <li class="pagenum01-01-01"><a href="">第五階層タイトル</a></li> <li class="pagenum01-01-02"><a href="">第五階層タイトル</a></li> <li class="pagenum01-01-03"><a href="">現在地第五階層</a></li> <li class="pagenum01-01-04"><a href="">第五階層タイトル</a></li> </ul> </li> <li class="pagenum01-02"><a href="">第四階層タイトル</a></li> <li class="pagenum01-03"><a href="">第四階層タイトル</a></li> <li class="pagenum01-04"><a href="">第四階層タイトル</a></li> </ul> </li> <li class="pagenum02"><a href="">第三階層タイトル</a></li> <li class="pagenum03"><a href="">第三階層下層あり</a> <ul> <li class="pagenum03-01"><a href="">第四階層タイトル</a></li> <li class="pagenum03-02"><a href="">第四階層タイトル</a></li> <li class="pagenum03-03"><a href="">第四階層タイトル</a></li> <li class="pagenum03-04"><a href="">第四階層タイトル</a></li> </ul> </li> <li class="pagenum04"><a href="">第三階層タイトル</a></li> <li class="pagenum05"><a href="">第三階層下層あり</a> <ul> <li class="pagenum05-01"><a href="">第四階層下層あり</a> <ul> <li class="pagenum05-01-01"><a href="">第五階層タイトル</a></li> <li class="pagenum05-01-02"><a href="">第五階層タイトル</a></li> <li class="pagenum05-01-03"><a href="">第五階層タイトル</a></li> <li class="pagenum05-01-04"><a href="">第五階層タイトル</a></li> </ul> </li> <li class="pagenum05-02"><a href="">第四階層タイトル</a></li> <li class="pagenum05-03"><a href="">第四階層タイトル</a></li> <li class="pagenum05-04"><a href="">第四階層タイトル</a></li> </ul> </li> <!--1_end--></ul> <!-- /.mod_section_box_side_nav --></div>
CSS
/* mod_section_box_side_nav -----------------------------------------*/ .mod_section_box_side_nav{ width:200px; border: solid 1px #2196f3; /* border-radius */ -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } .mod_section_box_side_nav a:link {color:#000; text-decoration:none;} .mod_section_box_side_nav a:visited {color:#000; text-decoration:none;} .mod_section_box_side_nav a:hover {color:#000; text-decoration:none;} .mod_section_box_side_nav a:active {color:#000; text-decoration:none;} .mod_section_box_side_nav p.category{ display: table; margin:0; width: 100%; font-size: 115%; } .mod_section_box_side_nav p.category a{ text-align: center; background-color: #2196f3; color: #FFF; display: table-cell; vertical-align: middle; height: 50px; } .mod_section_box_side_nav ul li a{ display: block; line-height: 1.3; } /* current */ .mod_section_box_side_nav ul li.current>a{ background-color:#cde9ff; } .mod_section_box_side_nav ul li a:hover{ background-color:#cde9ff; } /* 3 */ .mod_section_box_side_nav>ul>li>a{ font-size: 107%; border-top: solid 1px #2196f3; padding:16px 5px 14px 15px; } .mod_section_box_side_nav>ul>li>a:before{ margin:0 5px 0 0; content: " \f054"; color:#2196f3; font-family: FontAwesome; } /* 4 */ .mod_section_box_side_nav>ul>li>ul>li>a{ border-top: solid 1px #c7c7c7; padding: 10px 5px 7px 15px; color: #292929; } .mod_section_box_side_nav>ul>li>ul>li>a:before{ margin:0 5px 0 0; content: " \f101"; color:#2196f3; font-family: FontAwesome; } .mod_section_box_side_nav>ul>li>ul>li:first-child>a{ border-top: solid 1px #2196f3; } /* 5 */ .mod_section_box_side_nav>ul>li>ul>li>ul>li:first-child>a{ border-top: dotted 1px #a1a1a1; } .mod_section_box_side_nav>ul>li>ul>li>ul>li>a{ padding:10px 5px 6px 18px; color: #292929; } .mod_section_box_side_nav>ul>li>ul>li>ul>li>a:before{ margin:0 5px 0 0; color:#2196f3; content: " \f105"; font-family: FontAwesome; }