当鼠标悬停在带有 Jquery 的图像上时，SharePoint 可扩展链接菜单
我在为内容编辑器 Web 部件中的图像创建鼠标悬停菜单时遇到问题。
我想要的功能是在表格中并排放置两个图像。当用户将鼠标悬停在其中一张图像上时，会出现一个下拉菜单，其中包含一些不同的链接。当用户将鼠标移离图像时，菜单将消失。
这是包含图像的内容编辑器 Web 部件的 HTML：
<table _moz_resizing="true">
<tbody>
<tr>
<td>
<br/>
<center><a href="/sites/XXXX/AllItems.aspx"><img src="/sites/XXXX/SiteAssets/Link2.png" _moz_resizing="true" alt=""/></a></center>
</td>
<td>
<br/>
<center><a href="/sites/XXXX/Lists/XXXXX/AllItems.aspx"><img src="/sites/XXX/SiteAssets/Link3.png" _moz_resizing="true" alt=""/></a></center>
</td>
</tr>
</tbody>
</table>
这两个图像并排。现在，我想合并我在上面记下的效果，如以下链接所示： http://roshanbh.com.np/2008/06/accordion -menu-using-jquery.html
（只有鼠标悬停效果，本质上只有一个“标题”（图像），因为我只有三个子菜单链接。）
我从未真正学习过 javascript，只是查看我在网上找到的资源并将它们合并到页面中。有人可以概述一下如何使用适当的 DIV 标签构建 HTML 和 Jquery 来使其正常工作吗？任何帮助将不胜感激。
I'm having an issue creating a mouseover menu for an image within a Content Editor Web part.
The functionality I desire is to have two images in a table, side by side. When a user hovers over one of the images, a drop-down menu appears with a few different links. When the user moves their mouse off of the image, the menu will disappear.
This is my HTML for the Content Editor Web Part containing the images:
<table _moz_resizing="true">
<tbody>
<tr>
<td>
<br/>
<center><a href="/sites/XXXX/AllItems.aspx"><img src="/sites/XXXX/SiteAssets/Link2.png" _moz_resizing="true" alt=""/></a></center>
</td>
<td>
<br/>
<center><a href="/sites/XXXX/Lists/XXXXX/AllItems.aspx"><img src="/sites/XXX/SiteAssets/Link3.png" _moz_resizing="true" alt=""/></a></center>
</td>
</tr>
</tbody>
</table>
These two images are side by side. Now, I would like to incorporate the effect I made note of above as seen at this link:
http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html
(Only the mouseover effect and essentially for only one "header" (the image) as I will only have three sub-menu links. )
I never really learned javascript, but merely look resources I found online and incorporate them onto pages. Can someone please outline how I would structure the HTML and Jquery with the appropriate DIV tags to get this working? Any help would be greatly appreciated.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我会将 div 放入我的 html 代码中，而不是使用 img 标签，并且图像将作为我的 div 的背景。我会将 select 标签放入每个 div 中，并使用 display: none 作为 div 内的 select 标签的默认值。我的 div 将有一个类属性，并且在鼠标悬停事件上我将更改触发悬停的 div 中的选择的显示。当发生鼠标移出时，我会改回内部 div 的显示。尝试在谷歌上搜索更多信息。
我希望这有帮助
Instead of the img tags I would put divs into my html code and the images would be the background of my divs. I would put a select tag into each div with display: none as default for the select tags inside the divs. My divs would have a class attribute and on mouseover event I would change the display of the select in the div where the hover was triggered. When mouseout would happen I would change back the display of the inner div. Try to search on google for more information.
I hope this helps