Laravel 叶片和顺风没有正确混合，我不明白为啥

Posted 2023-03-07

【中文标题】Laravel 叶片和顺风没有正确混合，我不明白为啥

【英文标题】：Laravel blade and tailwind are not mixing properly and I don't understand whyLaravel 叶片和顺风没有正确混合，我不明白为什么

【发布时间】：2021-02-05 23:52:10

【问题描述】：

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

我使用的技术栈是：

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 @如果...

无论我试图拆分菜单，都会让菜单出错。有时菜单在侧面部署，有时它根本没有部署，我不明白为什么。它应该部署在下面。 如果您能提供帮助……我很乐意阅读。

这是一个 jsfiddle (https://jsfiddle.net/ftyteca/q9fp4nvg/6/)

【参考方案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');
);

【讨论】：

感谢您的回答。顺便说一句，我不明白这个js的问题是什么。如果您有线索，我很乐意阅读：)

其实我的问题很简单。这是一个javascript。即使注销表单不存在（未经过身份验证时），我也在注销按钮上添加了一个单击事件侦听器。所以javascript错误和菜单问题。