Question

我正在尝试创建一个菜单，其中包含附加到每个导航项的唯一数据属性。点击后，我希望该导航项找到具有相同属性的部分，并为其添加一个类。这是我迄今使用的代码（它是一个更大的脚本的一部分）。

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/

我们的想法是添加一个单独的浮动导航链接到不同的部分（而不是直接点击以展开当前实现的部分）。我添加的当前脚本似乎只是在点击时刷新页面。我根本无法让它在小提琴中工作，因此原始脚本确实会起作用。粘贴的部分我已添加到我的本地文件中。

Answer 1

在第一行，当您尝试调用<section>元素时，您在括号前缺少jQuery简写。这应该可以修复你的脚本。

所以看起来应该是这样的：

var $section = $('section');

那应该让你们都继续下去！

Answer 2

首先，您在第一个变量赋值中缺少$。 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;
} );

请注意，我们按照所点击锚点的数据部分属性的值过滤所有部分。

如果这没有帮助，请添加标记，以便我们可以看到您的结构。

使用find data属性添加类

2 个答案: