CMS Ruby問題の裏話
さて、私の主な問題は、それ自体でアコーディオンするモバイル ファースト ナビゲーション システムを実現しようとしているということです。問題は、Ruby on Rails で実行されるコンテンツ管理システム スクリプトからナビゲーションが生成されることです。私はスクリプトを編集できず、コンテンツ管理システムで何かを変更することは許可されていません。（私は主要な大学に勤務しているため、私の手に負えないことがあります。）
同様の概念
http://codepen.io/micahgodbolt/full/czwer
JSフィドル
現在何が起こっているのか、何をしようとしているのかについて、JS Fiddle を作成しました。これはある程度機能しますが、それぞれを個別に開き、開いたままにするか折りたたむことができるようにしたいと考えています。私は多くの提案を受け付けており、全体を作り直すことさえできます。
HTML
<nav class="menu twelvecol last">
<ul>
<li><a href="#">Home</a>
</li>
<li> <a href="#">Graduate Students</a>
<ul>
<li> <a href="#">Graduate Research</a>
<ul>
<li><a href="#">Departments</a>
</li>
<li><a href="#">Tertiary Page</a>
</li>
</ul>
</li>
<li><a href="#">Graduate Programs</a>
</li>
<li><a href="#">Apply Now</a>
</li>
</ul>
</li>
<li> <a href="#">Primary Page Link</a>
<ul>
<li> <a href="#">Secondary Page Link</a>
<ul>
<li><a href="#">Tertiary Page Link</a>
</li>
<li><a href="#">test a 2</a>
</li>
</ul>
</li>
<li><a href="#">test b</a>
</li>
</ul>
</li>
<li> <a href="#">test 2</a>
<ul>
<li><a href="#">test 2 a</a>
</li>
<li><a href="#">test 2 b</a>
</li>
<li><a href="#">test 2 c</a>
</li>
</ul>
</li>
</ul>
CSS
nav span {
background-image: url("http://webdesigntutsplus.s3.amazonaws.com/tuts/378_tessa/tessa-lt-dropdowns-21c7868/images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
border:none;
display:block;
float:right;
height:20px;
width:20px;
}
.bgchange {
background:#333;
color:#fff;
}
nav ul {
list-style: none;
border-top: 1px solid #efefef;
margin: 42px 0px 0px 10px;
font-size: 1.2em;
letter-spacing: 2px;
}
/* line 211, ../scss/_main.scss */
nav ul li {
width: 100%;
margin: 0;
}
/* line 214, ../scss/_main.scss */
nav ul li a {
display: block;
padding: 12px 14px;
font-weight: bold;
color: #3b4a54;
border-bottom: 1px solid #efefef;
text-decoration: none;
}
/* line 221, ../scss/_main.scss */
nav ul li a:hover {
color: #252e35;
background: rgba(153, 204, 255, 0.2);
text-decoration: none;
}
/* line 225, ../scss/_main.scss */
nav ul li a:active {
color: #252e35;
background: rgba(153, 204, 255, 0.1);
text-decoration: none;
}
/* line 229, ../scss/_main.scss */
nav ul li a:focus {
color: #fff;
background: rgba(153, 204, 255, 0.2);
text-decoration: none;
text-shadow: 1px 1px rgba(0, 0, 0, 0.6);
}
/* line 235, ../scss/_main.scss */
nav ul ul {
display:none;
margin: 0 0 0 0;
padding-bottom: 0;
list-style-type: none;
font-size: .8em;
width: 100%;
border: none;
}
/* line 242, ../scss/_main.scss */
nav ul ul li a {
padding: 7px 28px 7px 18px;
font-weight: 500;
border-bottom: none;
}
/* line 246, ../scss/_main.scss */
nav ul ul li a:hover {
background: rgba(66, 64, 62, 0.2);
padding: 7px 28px 7px 18px;
font-weight: 500;
border-bottom: none;
}
/* line 251, ../scss/_main.scss */
nav ul ul li a:active {
background: rgba(66, 64, 62, 0.1);
padding: 7px 28px 7px 18px;
font-weight: 500;
border-bottom: none;
}
/* line 256, ../scss/_main.scss */
nav ul ul li a:focus {
background: rgba(66, 64, 62, 0.2);
color: #1f272c;
}
/* line 260, ../scss/_main.scss */
nav ul ul ul {
display:none;
margin: 0;
padding-bottom: 0;
list-style-type: none;
font-size: 1em;
font-style: italic;
}
/* line 266, ../scss/_main.scss */
nav ul ul ul li a {
padding: 7px 28px 7px 35px;
font-weight: normal;
color: #5c6f7b;
border-bottom: none;
}
/* line 271, ../scss/_main.scss */
nav ul ul ul li a:hover {
background: rgba(217, 84, 30, 0.2);
padding: 7px 28px 7px 35px;
font-weight: normal;
border-bottom: none;
}
/* line 276, ../scss/_main.scss */
nav ul ul ul li a:active {
background: rgba(217, 84, 30, 0.1);
padding: 7px 28px 7px 35px;
font-weight: normal;
border-bottom: none;
}
/* line 281, ../scss/_main.scss */
nav ul ul ul li a:focus {
background: rgba(217, 84, 30, 0.2);
color: #1f272c;
}
Jクエリ
$('nav li:has(ul)').prepend('<span class="toggleSwitch"><a href="#"> </a></span>');
$('nav li li:has(ul)').prepend('<span class="toggleSwitch"><a href="#"> </a></span>');
$("nav li span.toggleSwitch").click(function (event) {
$('nav li > ul').slideToggle().end().siblings().hide('nav li li ul');
event.stopPropagation();
});