我正试图与雏菊和顺风没有改变太多的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"
}
}
1条答案
按热度按时间yeotifhr1#
1st:您必须有更新的依赖项,
npm i -D daisyui@latest
第二:在你的详细信息标签下做你的ul或un排序列表是绝对的。
你可以通过扩展父容器的底部填充来检查它。希望它能帮助