Sharepoint 2010 - 快速启动菜单手风琴风格答案

【问题标题】：Sharepoint2010 - QuickLaunchMenu accordion styleSharepoint 2010 - 快速启动菜单手风琴风格
【发布时间】：2011-08-26 05:44:46
【问题描述】：

我尝试将我的 Sharepoint2010 网站的 QuickLaunchMenu 更改为使用手风琴样式。

如何获取当前选中的项目？是否有可能将 css 类添加到当前（活动）导航项？如何添加第三个层次结构级别？

这是我的 jQuery 代码：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#s4-leftpanel-content li.static>ul.static").each(function(){
                $(this).hide();
            });
            $("#s4-leftpanel-content ul.root>li.static>a").click(function(ev){
                //ev.preventDefault();
                var child = $(this).parent().children('ul');            
                $("#s4-leftpanel-content li.static>ul.static").each(function(){
                        $(this).hide();            
                });
                child.toggle();
            });
            //disable heading click
            $("#s4-leftpanel-content ul.root>li.static>a").toggle(
                function () {},
                function () {}
            );
        });
    </script>

这是我的快速启动控件：

<SharePoint:UIVersionedContent UIVersion="4" runat="server">
                        <ContentTemplate>
                            <SharePoint:AspMenu id="V4QuickLaunchMenu" runat="server" EnableViewState="false" 
                                DataSourceId="QuickLaunchSiteMap" 
                                UseSimpleRendering="true" 
                                UseSeparateCss="false" 
                                SelectStaticItemsOnly="true" 
                                CustomSelectionEnabled="true" 
                                Orientation="Vertical" 
                                StaticDisplayLevels="3" 
                                MaximumDynamicDisplayLevels="2" 
                                SkipLinkText=""
                                CssClass="s4-ql">
                            </SharePoint:AspMenu>
                        </ContentTemplate>
                    </SharePoint:UIVersionedContent>

任何帮助将不胜感激。

谢谢！

【问题讨论】：

标签： jquery sharepoint sharepoint-2010 sharepoint-designer quicklaunch

【解决方案1】：

由于 AspMenu 继承自 Menu 类（WebControls 命名空间的一部分）并且

对于活动选择，请参阅 SelectedItem 属性

msdn.microsoft.com/EN-US/library/0f4wwt2y

对于 CSS，有 StaticSelectedStyle、DynamicSelectedSytle 和 LevelSelectedSytles 在您的情况下，您创建了 3 级静态菜单和 2 级动态菜单。看看 CSS 样式的 StaticSelectedStyle 和 DynamicSelectedSytle。

顺便说一句，由于您限制自己创建最多 2 个级别的动态菜单，我相信这就是您无法创建 3 个级别的原因。

    <DynamicSelectedStyle
        BackColor="color name|#dddddd"
        BorderColor="color name|#dddddd"
        BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|
            Groove|Ridge|Inset|Outset"
        BorderWidth="size"
        CssClass="string"
        Font-Bold="True|False"
        Font-Italic="True|False"
        Font-Names="string"
        Font-Overline="True|False"
        Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|
            Medium|Large|X-Large|XX-Large"
        Font-Strikeout="True|False"
        Font-Underline="True|False"
        ForeColor="color name|#dddddd"
        Height="size"
        HorizontalPadding="size"
        ItemSpacing="size"
        OnDisposed="Disposed event handler"
        VerticalPadding="size"
        Width="size"
    />
    <StaticSelectedStyle
        BackColor="color name|#dddddd"
        BorderColor="color name|#dddddd"
        BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|
            Groove|Ridge|Inset|Outset"
        BorderWidth="size"
        CssClass="string"
        Font-Bold="True|False"
        Font-Italic="True|False"
        Font-Names="string"
        Font-Overline="True|False"
        Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|
            Medium|Large|X-Large|XX-Large"
        Font-Strikeout="True|False"
        Font-Underline="True|False"
        ForeColor="color name|#dddddd"
        Height="size"
        HorizontalPadding="size"
        ItemSpacing="size"
        OnDisposed="Disposed event handler"
        VerticalPadding="size"
        Width="size"
    />

看看这个。 http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webcontrols.aspmenu_members.aspx

http://msdn.microsoft.com/en-us/library/ms476607.aspx

【讨论】：

【解决方案2】：

您好，我找到了一种在不更改 asp 控件属性的情况下为 sharepoint Quicklaunch 制作手风琴的方法。这是我的工作方式。

<script type="text/javascript" src="/_layouts/Scripts/jquery-1.4.4.min.js"></script>    
<script type="text/javascript" src="/_layouts/Scripts/jquery.easing.js"></script>
<script type="text/javascript" src="/_layouts/Scripts/jquery.dimensions.js"></script>
<script type="text/javascript" src="/_layouts/Scripts/jquery.accordion.js"></script>
<script type="text/javascript" src="/_layouts/Scripts/navaccord.js"></script>

在“navaccord.js”文件中添加以下代码

jQuery().ready(function(){      
    // second simple accordion with special markup
    jQuery('.root ').accordion({
        header: '.menu-item',
        navigation: true,
        event: 'click',         
        animated: 'easeslide',
        active: '.tab4',
        selectedClass: 'active'

    });

    // bind to change event of select to control first and seconds accordion
    // similar to tab's plugin triggerTab(), without an extra method
    var accordions = jQuery('.root');

    jQuery('#switch select').change(function() {
        accordions.accordion("activate", this.selectedIndex-1 );
    });
    jQuery('#close').click(function() {
        accordions.accordion("activate", -1);
    });
    jQuery('#switch2').change(function() {
        accordions.accordion("activate", this.value);
    });
    jQuery('#enable').click(function() {
        accordions.accordion("enable");
    });
    jQuery('#disable').click(function() {
        accordions.accordion("disable");
    });
    jQuery('#remove').click(function() {
        accordions.accordion("destroy");
        wizardButtons.unbind("click");
    });
});
$(function () {
$("ul>li>ul>li>a").removeClass("menu-item");
$("ul>li>ul").css({'display':'none', 'height':''});
        });

希望这对每个人都有帮助，唯一的问题是在选定页面加载后手风琴折叠。

【讨论】：