diff --git a/zh-cn/application-dev/key-features/multi-device-app-dev/typical-layout-scenario.md b/zh-cn/application-dev/key-features/multi-device-app-dev/typical-layout-scenario.md
index 0817e2f588d3b5400ba5684aa5f80566d51a5997..7f03669d97747365761699c1c9c65b818ff587fd 100644
--- a/zh-cn/application-dev/key-features/multi-device-app-dev/typical-layout-scenario.md
+++ b/zh-cn/application-dev/key-features/multi-device-app-dev/typical-layout-scenario.md
@@ -355,6 +355,7 @@ struct SideBarSample {
   @StorageLink('currentBreakpoint') private currentBreakpoint: string = "md";
   private breakpointSystem: BreakpointSystem = new BreakpointSystem()
   @State selectIndex: number = 0;
+  @State showSideBar:boolean=false;
 
   aboutToAppear() {
     this.breakpointSystem.register() 
@@ -375,7 +376,10 @@ struct SideBarSample {
       .width(180)
       .height(36)
       .onClick(() => {
-        this.selectIndex = index
+        this.selectIndex = index;
+        if(this.currentBreakpoint === 'sm'){
+          this.showSideBar=false
+        }
       })
   }
 
@@ -403,8 +407,11 @@ struct SideBarSample {
     .maxSideBarWidth(this.currentBreakpoint === 'sm' ? '100%' : '33.33%')
     .showControlButton(this.currentBreakpoint === 'sm')
     .autoHide(false)
+    .showSideBar(this.currentBreakpoint !== 'sm'||this.showSideBar)
     .onChange((isBarShow: boolean) => {
-      
+      if(this.currentBreakpoint === 'sm'){
+          this.showSideBar=isBarShow
+        }         
     })
   }
 }