Question

我目前遇到了一些问题。

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

但是，Sharepoint 2010不会像2007年那样生成快速启动HTML。

使用表生成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来做到这一点，但是我无法将标题分组到子标题。

我需要找到一种方法来使标题1的onClick事件对应于它下面的子标题，而不是文档中的其他子标题。

感谢您提供的任何帮助。

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

                    }
                });
        });

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

5 个答案: