1

CMS Ruby 问题的背景故事

好的，所以我的主要问题是我正在尝试完成一个移动优先的导航系统，它可以自行折叠。问题是导航是从在 ruby​​ on rails 上运行的内容管理系统脚本生成的。我不能编辑脚本，我们也不能用内容管理系统改变任何东西。（我在一所重点大学工作，所以有些事情是我无法控制的。）

类似的概念

http://codepen.io/micahgodbolt/full/czwer

JS小提琴

我为当前正在发生的事情和我正在尝试做的事情创建了一个 JS Fiddle。虽然这有点工作，但我希望能够分别打开每个并让它们保持打开或折叠。我对许多建议持开放态度，甚至对整个事情进行返工。

http://jsfiddle.net/bC475/7/

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;
}

查询

$('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();
});
4

1 回答 1

0

http://jsfiddle.net/ddavisgraphics/JY433/2/

     // Navigation Accordion Jquery Mobile Solutions

// Creates an Icon and Btn To Toggle Sub Layers    
$('nav > ul > li:has(ul)').prepend('<i class="icon-plus-sign pull-right btnToggle"> </i>');
$('nav > ul > li > ul > li:has(ul)').prepend('<i class="icon-plus-sign pull-right btnToggle"> </i>');

// Adds Classes to the Various UL's For Control    
$('nav > ul').addClass('primary');
$('nav > ul > li > ul').addClass('secondary');
$('nav > ul > li > ul > li > ul').addClass('tertiary');

// Hides Sub Navigation UL by Class
$('.secondary').hide();
$('.tertiary').hide();

// Hides Sub Navigation UL by Class
$('.btnToggle').click(function() {
    $(this).siblings('ul').slideToggle('fast');

    // CSS Toggle to change Icon For Use 
    if ($(this).hasClass('actToggle')) {
        $(this).removeClass('actToggle'); 
      }
    else {
        $(this).addClass('actToggle');
     }
});

我已经解决了我遇到的问题，我相信还会有更多的问题出现，但我现在有了一个很好的开始。对于其他有同样问题的人，我已经对我所做的事情进行了修改。

基本上我的目标是按钮切换并添加各种 UL 的类。除了确保它们被隐藏并让我很好地了解如何定位特定区域之外，我并没有真正使用这些类。

然后我寻找兄弟姐妹来切换。UL 我使用的原始方法只会显示，也不会崩溃。然后我添加了如果 Else statemtn 添加了另一个更改减号和加号的类，希望添加一些用户体验和菜单切换的相关性。

于 2013-04-11T15:01:19.367 回答