diff --git a/.gitignore b/.gitignore
index 23ffd02..57cdee9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,7 @@ yarn-debug.log*
 yarn-error.log*
 test/e2e/reports
 selenium-debug.log
+react/
 
 # Editor directories and files
 .idea
diff --git a/example/App.vue b/example/App.vue
index 8831fe8..a69d41e 100644
--- a/example/App.vue
+++ b/example/App.vue
@@ -24,6 +24,10 @@
             <label>highlightMouseoverNode</label>
             <input type="checkbox" v-model="highlightMouseoverNode">
           </div>
+          <div>
+            <label>collapsedOnClickBrackets</label>
+            <input type="checkbox" v-model="collapsedOnClickBrackets">
+          </div>
           <div>
             <label>deep</label>
             <select v-model="deep">
@@ -43,6 +47,7 @@
           :show-length="showLength"
           :show-line="showLine"
           :highlight-mouseover-node="highlightMouseoverNode"
+          :collapsed-on-click-brackets="collapsedOnClickBrackets"
           @click="handleClick">
         </vue-json-pretty>
       </div>
@@ -96,6 +101,10 @@
             <label>highlightSelectedNode</label>
             <input type="checkbox" v-model="highlightSelectedNode">
           </div>
+          <div>
+            <label>collapsedOnClickBrackets</label>
+            <input type="checkbox" v-model="collapsedOnClickBrackets">
+          </div>
           <div>
             <label>deep</label>
             <select v-model="deep">
@@ -124,6 +133,7 @@
           :show-length="showLength"
           :show-line="showLine"
           :select-on-click-node="selectOnClickNode"
+          :collapsed-on-click-brackets="collapsedOnClickBrackets"
           v-model="value"
           :path-selectable="((path, data) => typeof data !== 'number')"
           :selectable-type="selectableType"
@@ -176,6 +186,7 @@ export default {
       highlightMouseoverNode: true,
       highlightSelectedNode: true,
       selectOnClickNode: true,
+      collapsedOnClickBrackets: true,
       path: 'res',
       deep: 3,
       itemData: {},
diff --git a/package.json b/package.json
index 1afd5aa..e9b04f0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-json-pretty",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "A JSON tree view component that is easy to use and also supports data selection.",
   "author": "leezng <im.leezng@gmail.com>",
   "main": "vue-json-pretty.js",
diff --git a/src/components/app.vue b/src/components/app.vue
index e5ab884..4920cc6 100644
--- a/src/components/app.vue
+++ b/src/components/app.vue
@@ -23,6 +23,7 @@
         :visible.sync="visible"
         :data="data"
         :show-length="showLength"
+        :collapsed-on-click-brackets="collapsedOnClickBrackets"
         :show-comma="notLastKey">
         <span v-if="currentDeep > 1 && !Array.isArray(parentData)" class="vjs-key">{{ keyFormatter(currentKey) }}:</span>
       </brackets-left>
@@ -51,6 +52,7 @@
           :selectable-type="selectableType"
           :show-select-controller="showSelectController"
           :select-on-click-node="selectOnClickNode"
+          :collapsed-on-click-brackets="collapsedOnClickBrackets"
           :current-key="key"
           :current-deep="currentDeep + 1"
           @click="handleItemClick"
@@ -62,6 +64,7 @@
       <brackets-right
         :visible.sync="visible"
         :data="data"
+        :collapsed-on-click-brackets="collapsedOnClickBrackets"
         :show-comma="notLastKey">
       </brackets-right>
     </template>
@@ -164,6 +167,11 @@
         type: Boolean,
         default: true
       },
+      // collapsed control
+      collapsedOnClickBrackets: {
+        type: Boolean,
+        default: true
+      },
       /* outer props */
 
       /* inner props */
diff --git a/src/components/brackets-left.vue b/src/components/brackets-left.vue
index 055224b..e6431fa 100644
--- a/src/components/brackets-left.vue
+++ b/src/components/brackets-left.vue
@@ -4,14 +4,14 @@
 
     <!-- Expand -->
     <span
-      v-show="dataVisiable"
+      v-show="dataVisible"
       class="vjs-tree__brackets"
       @click.stop="toggleBrackets">
       {{ Array.isArray(data) ? '[' : '{' }}
     </span>
 
     <!-- Collapse -->
-    <span v-show="!dataVisiable">
+    <span v-show="!dataVisible">
       <span
         class="vjs-tree__brackets"
         @click.stop="toggleBrackets">
diff --git a/src/components/brackets-right.vue b/src/components/brackets-right.vue
index 0f40a35..8e045b7 100644
--- a/src/components/brackets-right.vue
+++ b/src/components/brackets-right.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-show="dataVisiable">
+  <div v-show="dataVisible">
     <span
       class="vjs-tree__brackets"
       @click.stop="toggleBrackets">
diff --git a/src/mixins/brackets-mixin.js b/src/mixins/brackets-mixin.js
index f64bd13..cf9f453 100644
--- a/src/mixins/brackets-mixin.js
+++ b/src/mixins/brackets-mixin.js
@@ -7,22 +7,25 @@ export default {
     data: {
       required: true
     },
-    showComma: Boolean
+    showComma: Boolean,
+    collapsedOnClickBrackets: Boolean
   },
   computed: {
-    dataVisiable: {
+    dataVisible: {
       get () {
         return this.visible
       },
       set (val) {
-        this.$emit('update:visible', val)
+        if (this.collapsedOnClickBrackets) {
+          this.$emit('update:visible', val)
+        }
       }
     }
   },
   methods: {
     // 切换括号展开|关闭
     toggleBrackets () {
-      this.dataVisiable = !this.dataVisiable
+      this.dataVisible = !this.dataVisible
     },
     // 括号优化函数, 若不是最后一项, 自动添加逗号
     bracketsFormatter (brackets) {