我正在使用DaisyUi导航栏,但它不像DaisyUi网站Next.js那样打开下拉菜单

pu3pd22g  于 2023-10-18  发布在  其他
关注(0)|答案(1)|浏览(145)

我正试图与雏菊和顺风没有改变太多的JavaScript,但不能弄清楚为什么它不表现出相同的daisyUi网页。当我点击我的脚本上的父,它只是不打开菜单,它添加了打开="”的细节标签一样,它在他们的网页上,但除了箭头旋转没有别的事情发生。

<div className="navbar bg-base-100">
  <div className="navbar-start">
    <div className="dropdown">
      <label tabIndex={0} className="btn btn-ghost lg:hidden">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
      </label>
      <ul tabIndex={0} className="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
        <li><a>Item 1</a></li>
        <li>
          <a>Parent</a>
          <ul className="p-2">
            <li><a>Submenu 1</a></li>
            <li><a>Submenu 2</a></li>
          </ul>
        </li>
        <li><a>Item 3</a></li>
      </ul>
    </div>
    <a className="btn btn-ghost normal-case text-xl">daisyUI</a>
  </div>
  <div className="navbar-center hidden lg:flex">
    <ul className="menu menu-horizontal px-1">
      <li><a>Item 1</a></li>
      <li tabIndex={0}>
        <details>
          <summary>Parent</summary>
          <ul className="p-2">
            <li><a>Submenu 1</a></li>
            <li><a>Submenu 2</a></li>
          </ul>
        </details>
      </li>
      <li><a>Item 3</a></li>
    </ul>
  </div>
  <div className="navbar-end">
    <a className="btn">Button</a>
  </div>
</div>

这是奇怪的,当我把同样的代码在我的.tsx文件不工作..有什么想法吗?tailwind.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
};

package.json

"name": "lion_lazuli_travel",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.5.8",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "axios": "^1.5.0",
    "eslint": "8.48.0",
    "eslint-config-next": "13.4.19",
    "formik": "^2.4.3",
    "next": "13.4.19",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.2.2",
    "yup": "^1.2.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.15",
    "daisyui": "^3.6.4",
    "postcss": "^8.4.29",
    "tailwindcss": "^3.3.3"
  }
}
yeotifhr

yeotifhr1#

1st:您必须有更新的依赖项,npm i -D daisyui@latest
第二:在你的详细信息标签下做你的ul或un排序列表是绝对的。

<details>
     <summary>Parent</summary>
          <ul className="p-2 absolute z-20">
               <li>
                   <a>Submenu 1</a>
               </li>
               <li>
                   <a>Submenu 2</a>
               </li>
          </ul>
</details>

你可以通过扩展父容器的底部填充来检查它。希望它能帮助

相关问题