需要 JQuery 帮助 - 动态创建展开/折叠快速启动

Question

我目前遇到了一些问题。

我需要让我的 Sharepoint 2010 网站具有展开/折叠的快速启动导航。有许多 Sharepoint 2007 解决方案和 Web 部件可以满足我的需要。见this example.

但是，Sharepoint 2010 生成快速启动 HTML 的方式与 2007 年不同。

2007 年的 Sharepoint 快速启动是使用表格生成的并使用大量 ID，而 2010 年会生成一个没有 ID 的无序列表。

因为这是生成的代码，我不想触碰标记。

基本标记如下：

<div class="menu vertical menu-vertical">
    <ul class="root static">
        <li class="static">
            <span class="static menu-item">
                <span class="additional-background">
                    <span class="menu-item-text">MAIN HEADING</span>
                </span>
            </span>
        </li>
        <li class="static">
            <a class="static menu-item" href="">
                <span class="additional-background">
                    <span class="menu-item-text">Sub Heading</span>
                </span>
            </a>
        </li>
        <li class="static">
            <span class="static menu-item">
                <span class="additional-background">
                    <span class="menu-item-text">MAIN HEADING</span>
                </span>
            </span>
        </li>
        <li class="static">
            <a class="static menu-item" href="">
                <span class="additional-background">
                    <span class="menu-item-text">Sub Heading</span>
                </span>
            </a>
        </li>
        <li class="static">
            <a class="static menu-item" href="">
                <span class="additional-background">
                    <span class="menu-item-text">Sub Heading</span>
                </span>
            </a>
        </li>
    </ul>
</div>

将来可以有任意数量的主标题和副标题。

我的想法是使用 JQuery 选择器将主标题与子标题分开。我可以通过按类选择然后按包含锚点的 li 来做到这一点，但我无法将标题分组到子标题。

我需要想办法让 Heading 1 的 onClick 事件对应它下面的 Sub Headings，而不是文档中的其他 Sub Headings。

感谢您提供的任何帮助。

Answer 1

这很有效，当您单击子菜单项时，它使标题可链接并且子菜单保持打开状态。

<script type="text/javascript">
$(document).ready(function() {
// do stuff when DOM is ready

makeLNCollapsible();
}); 
function makeLNCollapsible()
{
$("div.menu-vertical>ul.root>li.static>a").toggle(
function () {
var menuitem = $(this);
$(">ul", $(this).parent()).show("fast", function() { window.location = menuitem.attr('href');});
},
function () {
$(">ul", $(this).parent()).hide("fast");
     }
); 

$("li.static>ul.static").css("display","none");
$selectedEntry = $('li.static>ul.static .selected');
if($selectedEntry.length>0) {
    $selectedEntry.parent().css("display", "block");

}
$selectedEntry = $('li.static.selected');
if($selectedEntry.length > 0) {
    $selectedEntry.children('ul.static').css("display", "block");


}
 }
 </script>

Answer 2

我们开始（甚至测试过）：

    $(function() {
        //hide sub headings
        $('li:has(a.menu-item)').hide();
        //show subs on parent click
        $('li:has(span.menu-item)').click(function() {
            //get sub headings and show them
            $(this).nextUntil('li:has(span.menu-item)').toggle();
        });
    });

Answer 3

这适用于 SP2010 网站：

<script type="text/javascript"> 
    $(document).ready(function() {
        $(".s4-ql ul.root > li > .menu-item").click(function(){
            $(this).next('ul').toggle('slow');

        });

    }); 




</script>

请注意，我将子标题隐藏在自定义 css 中，以便页面加载不会延迟： /隐藏子菜单/ .s4-ql UL.root UL{ 显示：无； }

Answer 4

如果我理解正确，在主标题的 onclick 上，只需使用 parentsUntil('li') 遍历父 li，然后使用 next('li a')（或仅 li）到达带有子标题的下一个 li 并根据需要在那里遍历。

对你来说可能有点太笨拙了。

Answer 5

我想通了！

我发现 nextAll() 函数完全符合我的需要。

        $(".menu.vertical.menu-vertical > .root.static > li > span").parent().addClass('MainHeading');
        $('.MainHeading').css('cursor', 'pointer');
        $(".menu.vertical.menu-vertical > .root.static > li > a").parent().addClass('SubHeading');

        $('.MainHeading').click(function(){
                $(this).nextAll('li').each(function(){
                    elm = $(this)

                    if(elm.hasClass('MainHeading')){
                        return false;
                    }
                    else if(elm.hasClass('SubHeading')){
                        if(elm.css('display') == 'none')
                        {
                            elm.show();
                        }
                        else{
                            elm.hide();
                        }

                    }
                });
        });