現在、ドロップダウンを利用してサイドナビを作っています。
無事装着は完了したのですが、一度クリックしてページ推移するとドロップダウンが動かなくなる現象が発生しております。以下でどこか間違っている部分があるのでしょうか?
<ul id="accordion" class="accordion"> <li><!--開始--> <div class="cds-navi-title"></div> <div class="link"> <i class="fa fa-paint-brush"></i> <i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><%= link_to "", "/carriers/new" %></li> <li><a href="#"></a></li> </ul> </li><!--終了--> </ul>
ul { list-style-type: none; } .accordion { list-style-type: none; padding: 0; height: 100vh; background-color:#0365C0; width: 180px; text-align:center; margin-top:-12px; float:left; position:fixed; z-index:7; .link { cursor: pointer; color: white; position: relative; padding: 10px 10px 10px; width: 180px; display: block; background-color: #0365C0; color: #ffffff; text-decoration: none; border-bottom: 1px solid #ffffff; } li:last-child .link { border-bottom: 0; } a, a:visited { color : #fff; } } .accordion li i { position: absolute; top: 16px; left: 12px; font-size: 18px; color: #00A2FF; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .accordion li i.fa-chevron-down { right: 12px; left: auto; font-size: 16px; } .accordion li.open .link { color: white; } .accordion li.open i.fa-chevron-down { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .accordion li.default .submenu {display: block;} /** * Submenu -----------------------------*/ .submenu { display: none; background: #00A2FF; font-size: 14px; } .submenu li { border-bottom: 1px solid white; } .submenu a { display: block; text-decoration: none; color: white; padding: 12px; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .submenu a:hover { background-color: #ffccff; color: #ff0000; text-decoration: underline; } .cds-navi-title { padding: 0.5em 1.0em; margin-top:15px; margin-bottom:10px; display:inline-block; font-weight: bold; font-size:14px; color: #004D7F;/*文字色*/ background: #fff; border-radius: 25px;/*角の丸み*/ }
Accordion.prototype.dropdown = function(e) { var $el = e.data.el; $this = $(this), $next = $this.next(); $next.slideToggle(); $this.parent().toggleClass('open'); if (!e.data.multiple) { $el.find('.submenu').not($next).slideUp().parent().removeClass('open'); }; } var accordion = new Accordion($('#accordion'), false); });