Question

StackOverflow的新手，但我有一个关于jQuery效果的简单问题。

我正在尝试实现一个单击图标时滑动切换导航栏的功能。但是，它不起作用，我不知道为什么。提前谢谢！

HTML：

<div id="navigation">
<ul>
<li><a href="#" id="navbutton"><img src="navbutton.png" style="width: 15px"></a></li>
<li class="nav">One</li>
<li class="nav">Two</li>
<li class="nav">Three</li>
</ul>
</div>

jQuery的：

$(function() {
    function runEffect() {
      $( "#navigation .nav" ).toggle("slide", 500);
    };

    $( "#navbutton" ).click(function() {
      runEffect();
    });
});

Answer 1

你的选择器错了，在#navigation和.nav

之间插入一个空格，使用CSS后代选择器

$( "#navigation .nav" ).toggle(500);

要包含缓动选项，您可以将选项作为对象传递。

$( "#navigation .nav" ).toggle({ easing: 'slide', duration: 500 });

然而，如另一篇文章所述，缓动函数slide由JqueryUI提供，swing是jQuery提供的默认值。

这是fiddle

Answer 2

将$("#navigation.nav")更改为$("#navigation li.nav")，缓动的“幻灯片”方法需要jQuery UI。

<强> jsFiddle example

Answer 3

<强> HTML

<div id="navigation">
    <ul>
        <li>
            <a href="#" id="navbutton">
                <img src="~/Content/navlogo.png" onclick="ShowNav();" />
            </a>
        </li>
        <li class="nav">One</li>
        <li class="nav">Two</li>
        <li class="nav">Three</li>
    </ul>
</div>

<强>的jQuery ：

function ShowNav() {
    $("#navigation").slideToggle(500);
};

简单的JQuery效果不起作用？

3 个答案: