Laravel叶片和顺风混合不正确，我不明白为什么

如何解决Laravel叶片和顺风混合不正确，我不明白为什么

我对顺风还很陌生，我真的很喜欢它的工作方式。 不幸的是，我陷入无法解决的问题。

我使用的技术栈是：

• laravel 7
• tailwind 1.8.13
• 香草js

这是我的html /（tailwin）css

<header class="container mx-auto sticky top-0 z-20 bg-gray-900 pt-2 pl-2 pr-4" style="opacity:0.95;">
    <nav id="nav" class="flex items-center justify-between flex-wrap sm:pt-6 sm:pb-6 md:pt-6 md:pb-6 lg:pt-10 lg:pb-10">
        <div class=" flex-shrink-0 text-white mr-8">
            <a href="#">--------------</a>
        </div>
        <div class="block md:hidden">
            <button id="mobile-nav-trigger"
                class="flex items-center px-3 py-2 border rounded text-white border-black-400 hover:text-white hover:border-white">
                <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <title>Menu</title>
                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                </svg>
            </button>
        </div>
        <div id="mobile-nav" class="hidden text-center text-white w-full flex-grow md:text-left md:pt-1 md:flex md:items-center md:w-auto">
            <div class="text-sm md:flex-grow">
                <a href="#"
                    class="block mt-4 md:inline-block md:mt-0 text-white md:border-b-2 md:border-transparent md:hover:border-white md:hover:border-b-2 mr-0 md:mr-4">
                    Pricing
                </a>
                <a href="#"
                    class="block mt-4 md:inline-block md:mt-0 text-white md:border-b-2 md:border-transparent md:hover:border-white md:hover:border-b-2 mr-0 md:mr-4">
                    Blog
                </a>
                <a href="#"
                    class="block mt-4 md:inline-block md:mt-0 text-white md:border-b-2 md:border-transparent md:hover:border-white md:hover:border-b-2 mr-0 md:mr-4">
                    About
                </a>
            </div>
            <!--@guest-->
            <div class="text-sm">
                <a href="#"
                    class="block mt-4 md:inline-block md:mt-0 text-sm text-white md:border-b-2 md:border-transparent md:hover:border-white md:hover:border-b-2 mr-0 md:mr-4">
                    Log In
                </a>
                <a href="#"
                    class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-gray-900 hover:bg-white mt-4 md:mt-0">
                    Sign Up
                </a>
            </div>
            <!--@else-->
            <div class="text-sm">
                <a href="#"
                    class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-gray-900 hover:bg-white mt-4 md:mt-0">
                    Button
                </a>
                <a href="#" 
                    class="block mt-4 md:inline-block md:mt-0 text-sm font-semibold text-white md:border-b-2 md:border-transparent md:hover:border-white md:hover:border-b-2 md:mr-4"
                    onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                    Logout
                </a>
                <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                    {{ csrf_field() }}
                </form>
            </div>
            <!--@endguest-->
        </div>
    </nav>
</header>
<script>
    document.addEventListener("DOMContentLoaded",function(event) {
        document.getElementById("mobile-nav-trigger").addEventListener("click",function(event){
            var menuLinks = document.getElementById('mobile-nav');
            if (menuLinks.style.display == "" || menuLinks.style.display == "none") {
                menuLinks.style.display = "block";
            } else {
                menuLinks.style.display = "none";
            }
        });
    });
</script>

在我添加laravel @blade指令以隐藏菜单的右侧之前，这一直很好。我尝试过

• @guest ... @else ... @endguest
• @auth ... @else ... @endauth
• @if ...

无论我尝试拆分菜单如何，都会使菜单出错。某个时间菜单在侧面部署，有时它根本不部署，我不明白为什么。它应该在下面部署。 如果可以的话，我很乐意阅读。

这是一个jsfiddle（https://jsfiddle.net/ftyteca/q9fp4nvg/6/）

解决方法

我认为您的JavaScript有问题。起初一切都很好。但是，当我单击mobile-nav-trigger按钮后，它就无法正常工作。

你能试试吗

let hamburger = document.getElementById('mobile-nav-trigger');
let menuLinks = document.getElementById('mobile-nav');

hamburger.addEventListener('click',function () {
  menuLinks.classList.toggle('hidden');
});