diff --git a/src/dropdown-item/index.js b/src/dropdown-item/index.js
index 9b2a03425..6efddc2eb 100644
--- a/src/dropdown-item/index.js
+++ b/src/dropdown-item/index.js
@@ -40,19 +40,17 @@ export default createComponent({
   },
 
   methods: {
-    toggle(show) {
-      this.showPopup = !this.showPopup;
-
-      if (this.showPopup) {
-        this.showWrapper = true;
+    toggle(show = !this.showPopup, options = {}) {
+      if (show === this.showPopup) {
+        return;
       }
-    },
 
-    hide(skipTransition) {
-      this.showPopup = false;
+      this.transition = !options.immediate;
+      this.showPopup = show;
 
-      if (skipTransition) {
-        this.transition = false;
+      if (show) {
+        this.parent.updateOffset();
+        this.showWrapper = true;
       }
     }
   },
@@ -120,7 +118,6 @@ export default createComponent({
           onClose={this.onClose}
           onOpened={this.onOpened}
           onClosed={() => {
-            this.transition = true;
             this.showWrapper = false;
             this.$emit('closed');
           }}
diff --git a/src/dropdown-menu/index.js b/src/dropdown-menu/index.js
index eb646f483..16a03eb9b 100644
--- a/src/dropdown-menu/index.js
+++ b/src/dropdown-menu/index.js
@@ -48,7 +48,7 @@ export default createComponent({
   },
 
   methods: {
-    toggleItem(active) {
+    updateOffset() {
       const { menu } = this.$refs;
       const rect = menu.getBoundingClientRect();
 
@@ -57,19 +57,21 @@ export default createComponent({
       } else {
         this.offset = window.innerHeight - rect.top;
       }
+    },
 
+    toggleItem(active) {
       this.children.forEach((item, index) => {
         if (index === active) {
           item.toggle();
         } else if (item.showPopup) {
-          item.hide(true);
+          item.toggle(false, { immediate: true });
         }
       });
     },
 
     onClickOutside() {
       this.children.forEach(item => {
-        item.hide();
+        item.toggle(false);
       });
     }
   },
diff --git a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
index aedc50ae1..e1cfef488 100644
--- a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
+++ b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
@@ -5,7 +5,7 @@ exports[`click option 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s; z-index: 2013;">
+    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none; z-index: 2011;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable" style="">
         <div class="van-cell__title"><span>A</span></div>
       </div>
@@ -28,7 +28,7 @@ exports[`close-on-click-outside 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2006; position: absolute; animation-duration: 0.2s;"></div>
-    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s;">
+    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
         <div class="van-cell__title"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
@@ -72,20 +72,10 @@ exports[`direction up 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
-  <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 768px;">
-    <div class="van-overlay van-fade-enter-active" style="z-index: 2010; position: absolute; animation-duration: 0.2s;"></div>
-    <div class="van-popup van-popup--bottom van-dropdown-item__content van-popup-slide-bottom-enter van-popup-slide-bottom-enter-active" style="transition-duration: 0.2s;">
-      <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
-        <div class="van-cell__title"><span>A</span></div>
-        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
-            <!----></i></div>
-      </div>
-      <div class="van-cell van-cell--clickable">
-        <div class="van-cell__title"><span>B</span></div>
-      </div>
-    </div>
+  <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 0px; display: none;">
+    <!---->
   </div>
-  <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 768px; display: none;">
+  <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 0px; display: none;">
     <!---->
   </div>
 </div>
@@ -97,7 +87,7 @@ exports[`disable close-on-click-outside 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2008; position: absolute; animation-duration: 0.2s;"></div>
-    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
+    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
         <div class="van-cell__title"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
@@ -129,7 +119,7 @@ exports[`render option icon 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2004; position: absolute; animation-duration: 0.2s;"></div>
-    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
+    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);"><i class="van-icon van-icon-success van-cell__left-icon">
           <!----></i>
         <div class="van-cell__title"><span>A</span></div>
@@ -154,7 +144,7 @@ exports[`show dropdown item 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2000; position: absolute; animation-duration: 0.2s;"></div>
-    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
+    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
         <div class="van-cell__title"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
@@ -176,7 +166,7 @@ exports[`show dropdown item 2`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0s;">
+    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
         <div class="van-cell__title"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
@@ -189,7 +179,7 @@ exports[`show dropdown item 2`] = `
   </div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
-    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
+    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
         <div class="van-cell__title"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
@@ -208,7 +198,7 @@ exports[`show dropdown item 3`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0s;">
+    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
         <div class="van-cell__title"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
@@ -221,7 +211,7 @@ exports[`show dropdown item 3`] = `
   </div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
-    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s;">
+    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
         <div class="van-cell__title"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
@@ -247,3 +237,22 @@ exports[`title prop 1`] = `
   </div>
 </div>
 `;
+
+exports[`toggle method 1`] = `
+<div class="van-dropdown-menu van-hairline--top-bottom">
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
+  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
+    <div class="van-overlay van-fade-enter-active van-fade-enter-to" style="z-index: 2014; position: absolute; animation-duration: 0s;"></div>
+    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2015;" name="van-popup-slide-top"></div>
+  </div>
+</div>
+`;
+
+exports[`toggle method 2`] = `
+<div class="van-dropdown-menu van-hairline--top-bottom">
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
+  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
+    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2015; display: none;" name="van-popup-slide-top"></div>
+  </div>
+</div>
+`;
diff --git a/src/dropdown-menu/test/index.spec.js b/src/dropdown-menu/test/index.spec.js
index 14babd999..74581a158 100644
--- a/src/dropdown-menu/test/index.spec.js
+++ b/src/dropdown-menu/test/index.spec.js
@@ -1,19 +1,19 @@
 import { mount, later } from '../../../test/utils';
+import Vue from 'vue';
 import DropdownMenu from '..';
 import DropdownItem from '../../dropdown-item';
 
+Vue.use(DropdownMenu);
+Vue.use(DropdownItem);
+
 function renderWrapper(options = {}) {
   return mount({
     template: `
-      <dropdown-menu :direction="direction" :close-on-click-outside="closeOnClickOutside">
-        <dropdown-item v-model="value" :title="title" :options="options" />
-        <dropdown-item v-model="value" :title="title" :options="options" />
-      </dropdown-menu>
+      <van-dropdown-menu :direction="direction" :close-on-click-outside="closeOnClickOutside">
+        <van-dropdown-item v-model="value" :title="title" :options="options" />
+        <van-dropdown-item v-model="value" :title="title" :options="options" />
+      </van-dropdown-menu>
     `,
-    components: {
-      DropdownItem,
-      DropdownMenu
-    },
     data() {
       return {
         value: options.value || 0,
@@ -92,11 +92,7 @@ test('direction up', async () => {
     direction: 'up'
   });
 
-  await later(10);
-
-  const titles = wrapper.findAll('.van-dropdown-menu__title');
-
-  titles.at(0).trigger('click');
+  await later();
   expect(wrapper).toMatchSnapshot();
 });
 
@@ -130,15 +126,11 @@ test('didn`t find matched option', async () => {
 test('destroy one item', async () => {
   const wrapper = mount({
     template: `
-      <dropdown-menu>
-        <dropdown-item v-if="render" v-model="value" :options="options" />
-        <dropdown-item v-model="value" :options="options" />
-      </dropdown-menu>
+      <van-dropdown-menu>
+        <van-dropdown-item v-if="render" v-model="value" :options="options" />
+        <van-dropdown-item v-model="value" :options="options" />
+      </van-dropdown-menu>
     `,
-    components: {
-      DropdownItem,
-      DropdownMenu
-    },
     data() {
       return {
         value: 0,
@@ -159,14 +151,10 @@ test('destroy one item', async () => {
 test('disable dropdown item', async () => {
   const wrapper = mount({
     template: `
-      <dropdown-menu>
-        <dropdown-item disabled v-model="value" :options="options" />
-      </dropdown-menu>
+      <van-dropdown-menu>
+        <van-dropdown-item disabled v-model="value" :options="options" />
+      </van-dropdown-menu>
     `,
-    components: {
-      DropdownItem,
-      DropdownMenu
-    },
     data() {
       return {
         value: 0,
@@ -188,15 +176,11 @@ test('change event', async () => {
 
   const wrapper = mount({
     template: `
-      <dropdown-menu>
-        <dropdown-item v-model="value" :options="options" @change="onChange" />
-        <dropdown-item v-model="value" :options="options" />
-      </dropdown-menu>
+      <van-dropdown-menu>
+        <van-dropdown-item v-model="value" :options="options" @change="onChange" />
+        <van-dropdown-item v-model="value" :options="options" />
+      </van-dropdown-menu>
     `,
-    components: {
-      DropdownItem,
-      DropdownMenu
-    },
     data() {
       return {
         value: 0,
@@ -225,3 +209,26 @@ test('change event', async () => {
   expect(onChange).toHaveBeenCalledWith(1);
   expect(onChange).toHaveBeenCalledTimes(1);
 });
+
+test('toggle method', async done => {
+  const wrapper = mount({
+    template: `
+      <van-dropdown-menu>
+        <van-dropdown-item ref="item" />
+      </van-dropdown-menu>
+    `,
+    async mounted() {
+      // show
+      this.$refs.item.toggle(true, { immediate: true });
+      await later();
+      expect(wrapper).toMatchSnapshot();
+
+      // hide
+      this.$refs.item.toggle(false, { immediate: true });
+      await later();
+      expect(wrapper).toMatchSnapshot();
+
+      done();
+    }
+  });
+});