diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue
index 0ca7137ed0..c4066cf74d 100644
--- a/packages/@vuepress/theme-default/components/DropdownLink.vue
+++ b/packages/@vuepress/theme-default/components/DropdownLink.vue
@@ -2,12 +2,13 @@
   <div
     class="dropdown-wrapper"
     :class="{ open }"
+    @focusout="close(true)"
   >
     <button
       class="dropdown-title"
       type="button"
       :aria-label="dropdownAriaLabel"
-      @click="setOpen(!open)"
+      @click="toggle"
     >
       <span class="title">{{ item.text }}</span>
       <span
@@ -44,7 +45,7 @@
                 @focusout="
                   isLastItemOfArray(childSubItem, subItem.items) &&
                     isLastItemOfArray(subItem, item.items) &&
-                    setOpen(false)
+                    close()
                 "
               />
             </li>
@@ -53,7 +54,7 @@
           <NavLink
             v-else
             :item="subItem"
-            @focusout="isLastItemOfArray(subItem, item.items) && setOpen(false)"
+            @focusout="isLastItemOfArray(subItem, item.items) && close()"
           />
         </li>
       </ul>
@@ -75,6 +76,10 @@ export default {
   },
 
   props: {
+    inSidebar: {
+      type: Boolean,
+      default: false
+    },
     item: {
       required: true
     }
@@ -82,6 +87,7 @@ export default {
 
   data () {
     return {
+      isMobile: false,
       open: false
     }
   },
@@ -98,9 +104,19 @@ export default {
     }
   },
 
+  mounted () {
+    this.isMobile = 'ontouchstart' in document.documentElement
+  },
+
   methods: {
-    setOpen (value) {
-      this.open = value
+    toggle (event) {
+      const isButton = event.detail === 0
+
+      if (this.inSidebar || this.isMobile || isButton) this.open = !this.open
+    },
+
+    close (judge) {
+      if (!judge || (judge && this.isMobile)) this.open = false
     },
 
     isLastItemOfArray (item, array) {
diff --git a/packages/@vuepress/theme-default/components/NavLinks.vue b/packages/@vuepress/theme-default/components/NavLinks.vue
index 2656ae2752..10d2b511c7 100644
--- a/packages/@vuepress/theme-default/components/NavLinks.vue
+++ b/packages/@vuepress/theme-default/components/NavLinks.vue
@@ -11,6 +11,7 @@
     >
       <DropdownLink
         v-if="item.type === 'links'"
+        :in-sidebar="inSidebar"
         :item="item"
       />
       <NavLink
@@ -46,6 +47,13 @@ export default {
     DropdownLink
   },
 
+  props: {
+    inSidebar: {
+      type: Boolean,
+      default: false
+    }
+  },
+
   computed: {
     userNav () {
       return this.$themeLocaleConfig.nav || this.$site.themeConfig.nav || []
diff --git a/packages/@vuepress/theme-default/components/Sidebar.vue b/packages/@vuepress/theme-default/components/Sidebar.vue
index e70e33367a..32f44b8153 100644
--- a/packages/@vuepress/theme-default/components/Sidebar.vue
+++ b/packages/@vuepress/theme-default/components/Sidebar.vue
@@ -1,6 +1,6 @@
 <template>
   <aside class="sidebar">
-    <NavLinks />
+    <NavLinks :in-sidebar="true" />
 
     <slot name="top" />