如何以编程方式关闭字体面板？

// 获取字体面板的DOM元素
const fontPanel = document.getElementById('font-panel');

// 关闭字体面板
fontPanel.style.display = 'none';

// 获取字体面板的DOM元素
const fontPanel = $('#font-panel');

// 关闭字体面板
fontPanel.css('display', 'none');

<!-- 在Vue组件中 --><template>
  <div>
   <button @click="closeFontPanel">关闭字体面板</button>
    <div id="font-panel" v-show="isFontPanelOpen">
      <!-- 字体面板内容 -->
    </div>
  </div>
</template><script>
export default {
  data() {
    return {
      isFontPanelOpen: true,
    };
  },
  methods: {
    closeFontPanel() {
      this.isFontPanelOpen = false;
    },
  },
};
</script>

import React, { useState } from 'react';

function FontPanel() {
  const [isOpen, setIsOpen] = useState(true);

  const closeFontPanel = () => {
    setIsOpen(false);
  };

  return (
    <div>
     <button onClick={closeFontPanel}>关闭字体面板</button>
      {isOpen && (
        <div id="font-panel">
          {/* 字体面板内容 */}
        </div>
      )}
    </div>
  );
}

export default FontPanel;