小弟想要讓商品的分類欄如果被點擊的話文字就變藍色，然後底下內容的高度從原本的0變成fit-content，讓內容顯示出來；如果已經被點擊開了，就讓文字變回黑色，然後內容關閉。

程式碼如下:

const categoryTitleRef = useRef<HTMLDivElement>(null); // 分類標題
const categoryContentRef = useRef<HTMLDivElement>(null); // 分類內容

  if (categoryTitleRef.current) {
    categoryTitleRef.current.addEventListener("click", () => {
      if (categoryTitleRef.current!.classList.contains("text-black")) {
        categoryTitleRef.current!.classList.remove("text-black");
        categoryTitleRef.current!.classList.add("text-sky-500");
        categoryContentRef.current!.classList.remove("h-0");
        categoryContentRef.current!.classList.add("h-fit");
      } else {
        categoryTitleRef.current!.classList.add("text-black");
        categoryTitleRef.current!.classList.remove("text-sky-500");
        categoryContentRef.current!.classList.remove("h-fit");
        categoryContentRef.current!.classList.add("h-0");
      }
    });
  }

小弟是用tailwindcss，然後添加className來修改；預設狀態文字是黑色，透過標題是否有text-black這個class來判斷內容該開啟或關閉。

不過我發現當我點下去之後，class有改變，但是會瞬間又變回原本的樣子(快速連點之後發現的)，結果就沒有作用，想請問這是為什麼?