需求开发

src/components/ResearchSearchCom.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="research-search">
     <div class="topics nav-item">
-      <div class="title" @mouseenter="onNavEnter('topics')" @mouseleave="onNavLeave('topics')">
+      <div class="title" @mouseenter="onNavEnter('topics')" @mouseleave="onNavLeave('topics')" @click="onTitleClick('topics')">
         <span class="title-val">TOPICS</span>
         <img class="icon-down" src="@/assets/icon/down.svg" alt="">
       </div>
@@ -23,7 +23,7 @@
       </div>
     </div>
     <div class="authors nav-item">
-      <div class="title" @mouseenter="onNavEnter('authors')" @mouseleave="onNavLeave('authors')">
+      <div class="title" @mouseenter="onNavEnter('authors')" @mouseleave="onNavLeave('authors')" @click="onTitleClick('authors')">
         <span class="title-val">AUTHORS</span>
         <img class="icon-down" src="@/assets/icon/down.svg" alt="">
       </div>
@@ -102,28 +102,37 @@ const htmlRegroup = (str, val) => {
   return str.replace(reg, `<span style="color: #f00">${val}</span>`)
 }
 
+const onTitleClick = (type) => {
+  if (!isSelectType.value) {
+    isSelectType.value = type
+  } else {
+    isSelectType.value = type === isSelectType.value ? '' : type
+  }
+}
+
 const onNavEnter = (type) => {
-  isSelectType.value = type
+  // isSelectType.value = type
 }
 
 const onNavLeave = () => {
-  timer.value = setTimeout(() => {
-    isSelectType.value = false
-  }, 750)
+  // timer.value = setTimeout(() => {
+  //   isSelectType.value = false
+  // }, 1000)
 }
 
 const onSelectEnter = () => {
-  clearInterval(timer.value)
+  // clearInterval(timer.value)
 }
 
 const onSelectLeave = () => {
-  isSelectType.value = false
+  // isSelectType.value = false
 }
 
 const emit = defineEmits(['select'])
 
 const onSelectItem = (type, item, index) => {
   emit('select', { type, item, index })
+  isSelectType.value = ''
 }
 
 const toSearch = () => {