添加自定义JQuery菜单新鲜滑出

时间：2013-09-15 作者：rockStar

TBH这是我第一次添加自定义jquery 在a中wordpress 我已经读了大约10-20篇关于它的文章，我想还有更多的文章，但仍然缺少一些东西，所以我这样做了，请指出我做错了什么，我添加的jquery被发现了here.

这是我想要的片段，

<div class="container">
            <ul id="menu">
                <li>
                    <a>
                        <i class="icon_about"></i>
                        <span class="title">About</span>
                        <span class="description">Learn about us and our services</span>
                    </a>
                </li>
            </ul>
</div>

这是我添加的代码function.php 在wordpress 主题

函数my\\u custom\\u function（）{wp\\u enqueue\\u脚本（\'jquery\'）；

wp_enqueue_style( \'style\', get_template_directory_uri() . \'/javascript/css/style.css\' );

wp_register_script( \'jquery\', get_template_directory_uri() .  \'/javascript/jquery-1.4.2.min.js\', array( \'jquery\' ), false, true );

wp\\u enqueue\\u脚本（\'jquery\'）；}添加\\u操作（“wp\\u enqueue\\u scripts”，“my\\u custom\\u function”）；

我在header.php 正如我在样本索引中看到的。滑块的php在头部，所以我认为它是必要的，

<script type="text/javascript">
        $(function() {
            $(\'#menu > li\').hover(
                function () {
                    var $this = $(this);
                    $(\'a\',$this).stop(true,true).animate({
                            \'bottom\':\'-15px\'
                        }, 300);
                    $(\'i\',$this).stop(true,true).animate({
                            \'top\':\'-10px\'
                        }, 400);
                },
                function () {
                    var $this = $(this);
                    $(\'a\',$this).stop(true,true).animate({
                            \'bottom\':\'-95px\'
                        }, 300);
                    $(\'i\',$this).stop(true,true).animate({
                            \'top\':\'50px\'
                        }, 400);
                }
            );
        });
   </script>

还有这个php 代码片段是我获取菜单的地方，

<?php wp_nav_menu(\'menu=header_menu&container=false\'); ?>

从这一切来看，我只是想知道我做错了什么，现在我下一步需要做什么，几乎是jquery集成的新手，今天就这么做了。在我看来，我也错过了最后一件事php 代码，其中我需要包括id="menu" 但这也是问题所在，我该如何添加它。

顺便问一下，是否有人成功地实施了Fresh Slide Out 请帮助我，尽管我只是在学习，但我仍然需要成功地实现它，才能转到其他jquery并试用它们。

2 个回复

最合适的回答,由SO网友:s_ha_dum 整理而成

除了@Wyck的回答之外，既然您问自己是否做错了什么，我建议您通常更正确的做法是注册脚本并将其排队，就像您在my_custom_function, 而不是直接将脚本写入头中。

也就是说，请输入以下代码：

    $(function() {
        $(\'#menu > li\').hover(
            function () {
                var $this = $(this);
                $(\'a\',$this).stop(true,true).animate({
                        \'bottom\':\'-15px\'
                    }, 300);
                $(\'i\',$this).stop(true,true).animate({
                        \'top\':\'-10px\'
                    }, 400);
            },
            function () {
                var $this = $(this);
                $(\'a\',$this).stop(true,true).animate({
                        \'bottom\':\'-95px\'
                    }, 300);
                $(\'i\',$this).stop(true,true).animate({
                        \'top\':\'50px\'
                    }, 400);
            }
        );
    });

。。。在a中.js 将其归档并排队，就像您对flex-script.

如果您注册和排队正确，您可以节省一些精力。例如：

function my_custom_function() {
        wp_enqueue_script( \'jquery\' );

        wp_enqueue_style( \'style\', get_template_directory_uri() . \'/javascript/css/style.css\' );

        wp_enqueue_script( \'flex-script\', get_template_directory_uri() .  \'/javascript/jquery-1.4.2.min.js\', array( \'jquery\' ), false, true );
}
add_action( \'wp_enqueue_scripts\', \'my_custom_function\' );

你不需要这个wp_enqueue_script( \'jquery\' );. jQuery被列为flex-script. 它将自动加载。你也可以用你的flex-script 以及您的附加代码。

function my_custom_function() {

        wp_enqueue_style( \'style\', get_template_directory_uri() . \'/javascript/css/style.css\' );

        wp_register_script( \'flex-script\', get_template_directory_uri() .  \'/javascript/flex-script-name.js\', array( \'jquery\' ), false, true );

        wp_register_script( \'my-flex-code\', get_template_directory_uri() .  \'/javascript/my-flex-code-name.js\', array( \'flex-script\' ), false, true );

        wp_enqueue_script(\'my-flex-code\');
}
add_action( \'wp_enqueue_scripts\', \'my_custom_function\' );

最后一行--wp_enqueue_script(\'my-flex-code\'); -- 应将所有依赖脚本排队。

我注意到你注册了flex-script 作为jQuery的旧版本--/javascript/jquery-1.4.2.min.js. 我想这是个错误。您不应该使用旧的jQuery，更不用说加载核心jQuery和另一个jQuery了。那肯定会引起麻烦。

包括id="menu", 我不确定您的Javascript需要该ID在哪里，但我相当肯定Wyck的做法是正确的。

以下操作应满足您的要求：

wp_nav_menu(
  array(
    \'container_class\' => \'container\',
    \'menu_id\' => \'menu\'
  )
);

如果且仅当您对所需内容的描述正确时，这应该并且确实会产生您想要做的事情：

<div class="container">
        <ul id="menu" class="menu">

SO网友:Wyck

正如您在Codex页面上看到的：http://codex.wordpress.org/Function_Reference/wp_nav_menu, wp_nav_menu 获取多个参数，包括id.

\'menu_class\'      => \'my-menu\',
\'menu_id\'         => \'menu\',

结束

小码农CODE

添加自定义JQuery菜单新鲜滑出

相关推荐

JQuery multiple toggle values