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

Question

我对 Tailwind 很陌生，我真的很喜欢它的工作方式。不幸的是，我遇到了一个我未能解决的问题。

我使用的技术栈是：

laravel 7
顺风 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/)

Answer 1

我认为这是您的 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');
});

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

Laravel blade and tailwind are not mixing properly and I don't understand why

css

laravel

laravel-blade

tailwind-css