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 b53b9b4b6f877440c863c2a715fc471a755a8e2f..9ce49b2a0c0e082fb717ffee5e630744c0c0b2cd 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
@@ -353,8 +353,9 @@ struct MultiLaneList {
 @Component
 struct SideBarSample {
   @StorageLink('currentBreakpoint') private currentBreakpoint: string = "md";
-  private breakpointSystem: BreakpointSystem = new BreakpointSystem()
+  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
+        }
     })
   }
 }