让兄弟姐妹在 jquery 折叠菜单中工作
我为折叠菜单编写了一个快速脚本,并使用 $(location).attr('pathname')
将菜单项与当前页面匹配,并为其设置一个类。唯一的问题似乎是某些路径名与 .siblings('ul').hide()
部分不能很好地配合。
我这样做是为了避免出现所有菜单项关闭然后匹配的菜单快速重新打开的情况。但我注意到,在具有路径名(例如第二页和第四页)的页面上,这些页面的菜单项不会滑动打开。然而,他们确实应用了“当前”类别。
那么,有几个问题。
破折号是否可能导致字符串计算不正确,或者更有可能只是因为我将其链接在一起的方式而任意关闭活动菜单? PS 这是一个小提琴,我在其中删除了同级链并隐藏了独立调用中的菜单,但由于 URL 的性质,它实际上无法工作。 http://jsfiddle.net/contendia/ddXBU/
顺便说一句,有没有通过这种方式使用路径名会产生 XSS 漏洞吗?我应该对其进行消毒吗?如果需要的话如何消毒?
$(文档).ready(function() { // 获取 URI 路径并去掉前导斜杠 var path = $(location).attr('路径名').replace(/\//, ""); // 获取并追加查询字符串 路径 += $(location).attr('搜索'); // 上升 2 层 (a > li > ul) 并打开。隐藏所有其他人。 $('#leftmenu a[href="' + path + '"]').addClass('current').parent().parent().slideDown().siblings('ul').hide(); $('#leftmenu h3').click( 功能() { var $this = $(this); $this.next('ul').siblings('ul').slideUp(); $this.next().slideToggle(300); }); });
I put together a quick script for a collapsing menu and used $(location).attr('pathname')
to match the menu item with the current page and set a class to it. Only problem seems to be that certain pathnames don't play well with the .siblings('ul').hide()
part.
I did it this way to avoid having a flash where all menu items close and then the matching menu quickly reopens. But I'm noticing that on pages with pathnames like page-number-two and page-number-four, the menu items for those pages don't slide open. They do, however, get the 'current' class applied.
So, a couple questions.
Is it likely the dashes are causing the string to evaluate incorrectly or is it more likely just arbitrarily closing the active menu because of the way I chained it together? P.S. Here's a fiddle where I removed the siblings chain and hid the menus from a standalone call, but because of the nature of the URL, it can't actually work. http://jsfiddle.net/contendia/ddXBU/
As an aside, is there any XSS vulnerability to using the pathname this way? Should I sanitize it, and if so how?
$(document).ready(function() { // Get the URI path and strip the leading slash var path = $(location).attr('pathname').replace(/\//, ""); // Get and append the querystring path += $(location).attr('search'); // Go up 2 levels (a > li > ul) and open. Hide all others. $('#leftmenu a[href="' + path + '"]').addClass('current').parent().parent().slideDown().siblings('ul').hide(); $('#leftmenu h3').click( function() { var $this = $(this); $this.next('ul').siblings('ul').slideUp(); $this.next().slideToggle(300); }); }); <div id="leftmenu"> <h3>First Menu</h3> <ul> <li><a href="page_number_one">Underscores</a></li> <li><a href="page-number-two">Hyphens</a></li> </ul> <h3>Second Menu</h3> <ul> <li><a href="page_number_three">Underscores</a></li> <li><a href="page-number-four">Hyphens</a></li> </ul> </div>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论