我正在尝试创建一个菜单,其中包含附加到每个导航项的唯一数据属性。点击后,我希望该导航项找到具有相同属性的部分,并为其添加一个类。这是我迄今使用的代码(它是一个更大的脚本的一部分)。
var $el = $( '#bl-main' ),
$sections = $el.children( 'section' ),
$navItems = $( 'nav > a' );
$navItems.on( 'click', function( event ) {
$el.addClass( 'bl-expand-item' );
$navItems.find("[data-section='" + current + "']");
$sections.find("[data-section='" + $navItems + "']").addClass( 'expand expand-top' );
} );
这是它基于的脚本。 http://tympanus.net/Development/FullscreenLayoutPageTransitions/
我们的想法是添加一个单独的浮动导航链接到不同的部分(而不是直接点击以展开当前实现的部分)。我添加的当前脚本似乎只是在点击时刷新页面。我根本无法让它在小提琴中工作,因此原始脚本确实会起作用。粘贴的部分我已添加到我的本地文件中。
答案 0 :(得分:0)
在第一行,当您尝试调用<section>
元素时,您在括号前缺少jQuery简写。这应该可以修复你的脚本。
所以看起来应该是这样的:
var $section = $('section');
那应该让你们都继续下去!
答案 1 :(得分:0)
首先,您在第一个变量赋值中缺少$。 var $ section = $('section')
之后很难在没有看到你的标记的情况下告诉你要做什么,但是我会对它进行一次尝试。
您似乎尝试按导航&gt;的data-section属性过滤$ section对象。一个元素。这段代码应该这样做:
var $section = $( 'section' ), $navItems = $( 'nav > a' );
$navItems.on( 'click', function( event ) {
var $navSection = $section.filter("[data-section='" + $( this ).data( 'section' ) + "']");
$navSection.addClass( 'expand expand-top' );
return false;
} );
请注意,我们按照所点击锚点的数据部分属性的值过滤所有部分。
如果这没有帮助,请添加标记,以便我们可以看到您的结构。