Jquery CMS动态手风琴菜单，带主动父菜单，最终响应

CMS Ruby问题的背景故事

好的，所以我的主要问题是，我正在尝试实现一个移动的第一导航系统，它可以自动折叠。关键是导航是从运行在RubyonRails上的内容管理系统脚本生成的。我无法编辑脚本，我们不允许更改内容管理系统的任何内容。（我在一所重点大学工作，所以有些事情我无法控制。）

类似概念

JS小提琴

我已经为当前正在发生的事情和我正在尝试做的事情创建了一个JS提琴。虽然这有点工作，我想能够打开每一个单独的，让他们要么保持开放或崩溃。我愿意接受许多建议，甚至愿意对整个事情进行修改

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>

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

$（'nav li:has（ul）'）。前置（“”）；
$（'nav li:has（ul）'）。前置（''；
$（“导航范围切换开关”）。单击（函数（事件）{
$（'nav li>ul'）.slideToggle（）.end（）.Slides（）.hide（'nav li ul'）；
event.stopPropagation（）；
});

//导航手风琴Jquery移动解决方案
//创建图标和Btn以切换子层
$（'nav>ul>li:has（ul）'）。前置（“”）；
$（'nav>ul>li>ul>li:has（ul）'）。前缀（“”）；
//将类添加到各种UL以进行控制
$（'nav>ul'）.addClass（'primary'）；
$（'nav>ul>li>ul'）.addClass（'secondary'）；
$（'nav>ul>li>ul>li>ul'）。addClass（'treative'）；
//按类隐藏子导航
$（'.secondary'）.hide（）；
$（'.treative'）.hide（）；
//按类隐藏子导航
$（'.btnToggle'）。单击（函数（）{
$（this）.同级（'ul'）。滑动切换（'fast'）；
//CSS切换以更改要使用的图标
if（$（this）.hasClass（'actToggle'））{
$（this.removeClass（'actToggle'）；
}
否则{
$（this.addClass（'actToggle'）；
}
});

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

基本上，我的目标是按钮切换，并为各种UL添加类。除了确保这些类是隐藏的，并让我知道如何针对特定区域之外，我不会真正地使用这些类

然后我寻找兄弟姐妹来切换。我最初使用的UL方法只会显示，而不会崩溃。然后我添加了if Else statemtn，它添加了另一个类，该类更改了加号和减号，希望为菜单的切换增加一些用户体验和可靠性

更新小提琴

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

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