0

我有一个菜单，我希望能够将鼠标悬停在策略下的菜单项上，并使用 JQuery 显示一个工具提示。我的想法是仅将选择器 static.dynamic-children 用于策略。从那里为包含策略 1、策略 2 和策略 3 的 li 标签设置悬停操作，并显示工具提示（此示例中的文本可以是任何内容）。这就是我卡住的地方，不知道如何继续。

这样做的最佳方法是什么？任何帮助将非常感激。

注意：菜单由 SharePoint 动态生成，因此包含所有属性。

这是菜单的 HTML：

<UL class="root static">
<LI class=static><A accessKey=1 class="static menu-item" href="/Pages/Welcome2.aspx">
            <SPAN class=additional-background>
                <SPAN class=menu-item-text>Home</SPAN>
            </SPAN></A>
            <UL class=static>
                <LI class="static dynamic-children" hoverDebouncer="0">
                    <SPAN class="static dynamic-children menu-item">
                        <SPAN class=additional-background>
                            <SPAN class=menu-item-text>Applications</SPAN>
                        </SPAN>
                    </SPAN>
                    <UL class=dynamic>
                        <LI class=dynamic><A class="dynamic menu-item new-window" href="http://localhost/App1/MyApp1.aspx" target=_blank><SPAN class=additional-background><SPAN class=menu-item-text>App 1</SPAN></SPAN></A></LI>
                        <LI class=dynamic><A class="dynamic menu-item" href="/Documents/MyApp2.aspx"><SPAN class=additional-background><SPAN class=menu-item-text>App 2</SPAN></SPAN></A></LI>
                        <LI class=dynamic><A class="dynamic menu-item new-window" href="http://localhost/App3/MyApp3.aspx" target=_blank><SPAN class=additional-background><SPAN class=menu-item-text>App 3</SPAN></SPAN></A></LI>
                    </UL>
                </LI>
                <LI class="static dynamic-children" hoverDebouncer="0">
                    <SPAN class="static dynamic-children menu-item">
                        <SPAN class=additional-background>
                            <SPAN class=menu-item-text>Policies</SPAN>
                        </SPAN>
                    </SPAN>
                    <UL class=dynamic>
                        <LI class=dynamic><A class="dynamic menu-item" href="/corp/Policy1/Shared%20Documents/Forms/Policies.aspx"><SPAN class=additional-background><SPAN class=menu-item-text>Policy 1</SPAN></SPAN></A></LI>
                        <LI class=dynamic><A class="dynamic menu-item" href="/corp/Policy2/Shared%20Documents/Forms/Policies.aspx"><SPAN class=additional-background><SPAN class=menu-item-text>Policy 2</SPAN></SPAN></A></LI>
                        <LI class=dynamic><A class="dynamic menu-item" href="/services/Policy3/Resources/Forms/Policies.aspx"><SPAN class=additional-background><SPAN class=menu-item-text>Policy 3</SPAN></SPAN></A></LI>                            
                    </UL>
                </LI>
                <LI class=static>
                    <A class="static menu-item" title="The Search Center displays search results" href="/SearchCenter/Pages/default.aspx"><SPAN class=additional-background><SPAN class=menu-item-text>Search</SPAN></SPAN></A>
                </LI>
            </UL>
        </LI>
    </UL>
4

1 回答 1

1

你看过jquery hover not working on my list items吗？

您可以将课程hoverable或类似课程添加到您的“政策”菜单部分。然后设置一个选择器.hoverable li并使用上面的链接来触发您的代码以打开一个工具提示。

如果您只想要一个简单的工具提示，您可以将title='Tooltip here'属性添加到您的li. 例如<li title="blah blah">My Menu Item 3</li>。

您还可以使用 jQuery UI 获得更好的高级工具提示：http: //jqueryui.com/tooltip/

更新：选择器$(".dynamic-children:nth-child(2) li").attr("title", "hi");应该可以解决问题。使用您的 HTML查看http://jsfiddle.net/Qfx7c/

于 2013-05-02T01:54:50.647 回答