Javascript JQuery animate（）不是'；t动画

我想动画一个边栏来到屏幕上，一旦用户点击了菜单切换按钮

控制台中没有错误，当我在控制台中放置一个执行的

alert（）

函数时，当单击菜单按钮时，它肯定会触发。尽管如此，侧边栏从未出现在屏幕上

代码如下：

边栏

<div class="sidebarContainer"
    style="width: 15em; height: 100%; position: fixed; left: -300px; background-color: #333; z-index: 999; overflow: scroll;">
    <div class="titleContainer"
        style="text-align: center; padding-top: 2rem; padding-bottom: 1rem; background-color: #222;">
        <img style="width: 6rem; height: 6rem; border-radius: 50px;"
            src="/images/users/icons/{{ Auth::user()->icon_path }}">
        <br><br>
        <span style="color: white;">{{ Auth::user()->name }}</span>
    </div>

    @foreach($Menus as $menu)
    <div id="linkContainer" class="linkContainer" style="padding: 0.3rem;">
        <a style="text-decoration: none; color: white; padding-left: 0.3rem;" href="/{{ $menu->slug }}">{!!
            $menu->icon_path !!} {{ $menu->name }}</a>
    </div>
    @endforeach

    <div id="linkContainer" class="linkContainer" style="padding: 0.3rem;">
        <a style="text-decoration: none; color: white; padding-left: 0.3rem;" href="{{ route('logout') }}"
            onclick="event.preventDefault(); document.getElementById('logout-form').submit();"><i
                class="fas fa-sign-out-alt"></i> Logout</a>

        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
            @CSRF
        </form>
    </div>

    <br><br>
</div>

图标_路径}“>



{{Auth:：user（）->name}
@foreach（$Menus作为$menu）
@endforeach
@CSRF

JavaScript

<script type="text/javascript">
    $(function(){
        $("#linkContainer:nth-child(odd)").css('background-color', '#222');
    });

    $("#menuToggle").click(function(){
        $("#sidebarContainer").animate({"left": "0px"});
    });
</script>

$（函数（）{
$（“#linkContainer:nth child（odd）”）.css（'background-color'，'#222'）；
});
$（“#菜单切换”）。单击（函数（）{
$（“#sidebarContainer”）.animate（{“left”：“0px”}）；
});

---

任何帮助都将不胜感激：）

您指的是sidebarContainer ID，但div只有sidebarContainer类。我更新了代码，也将单击放在了函数调用中

<script type="text/javascript">
    $(function(){
        $("#linkContainer:nth-child(odd)").css('background-color', '#222');


    $("#menuToggle").click(function(){
        $(".sidebarContainer").animate({"left": "0px"});
    });

});
</script>

$（函数（）{
$（“#linkContainer:nth child（odd）”）.css（'background-color'，'#222'）；
$（“#菜单切换”）。单击（函数（）{
$（“.sidebarContainer”）.animate（{“left”：“0px”}）；
});
});

另一方面，您很可能在该循环中复制ID，并且ID是唯一的：

@foreach($Menus as $menu)
    <div id="linkContainer" class="linkContainer" style="padding: 0.3rem;">

@foreach（$Menus作为$menu）

确保sideContainerbar位于css中，并且可能在css中也有left属性值。left属性仅适用于定位的元素。（相对或绝对），或者您可以将相对于所提供对象的位置作为参数包含到动画函数中。#干杯

是的，在创建每个菜单项的元素时ID是重复的，我将对此进行更改。有点像掌心时刻。它已经是了？

好，现在尝试将$（文档）中的脚本包装起来。就绪（函数（）{YOUR-CODE-GOES-HERE}）；现在应该没事了