Question

CMS Ruby问题的背景故事

好吧所以我的主要问题是我正在努力完成一个手风琴式的第一个导航系统。问题在于导航是从在rails上运行ruby的内容管理系统脚本生成的。我无法编辑脚本，我们不允许使用内容管理系统进行任何更改。（我在一所大学工作，所以有些事情是我无法控制的。）

类似概念

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

JS Fiddle

我为当前正在发生的事情以及我正在尝试做的事情创建了一个JS小提琴。虽然这有点起作用，但我希望能够单独打开它们并让它们保持打开或折叠。我对许多建议持开放态度，甚至对整个事情进行修改。

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

JQUERY

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

Answer 1

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

我已经解决了我遇到的问题，我肯定会弹出更多，但我现在有一个很好的开始。对于那些遇到同样问题的人来说，我已经放弃了我所做的事情。

基本上我将Button Toggles和Add Classes作为各种UL的目标。除了确保它们被隐藏起来并让我很好地了解如何定位特定区域之外，我并不真正使用这些类。

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

CMS动态手风琴菜单w活动家长最终响应

1 个答案: