我有两个按钮导航栏。
<div class="navbar-header">
<div class="navbar-header">
<div id="toggle-menu" ng-click="isShowSideBarMobile = !isShowSideBarMobile"><i class="fa fa-bars fa-3x"></i></div>
<div id="toggle-function" ng-click="isShowRightContent = !isShowRightContent"><i class="fa fa-ellipsis-v fa-3x"></i></div>
</div>
</div>
当单击div#toggle-menu时,它使div#sidebar-mobile-wrapper显示。
<div id="sidebar-mobile-wrapper" class="container-fluid" ng-show="isShowSideBarMobile"></div>
当我点击div#toggle-function时,它会显示div#right-content-mobile。
<div class="container-fluid right-content-mobile" ng-show="isShowRightContent"></div>
都奏效了。但现在我想,一次只能显示一个div。所以当我点击#toggle-menu时,如果div#right-content-mobile是可见的,它将被隐藏和sidebar-mobile-wrapper等。
找这个。我希望这正是你需要的。实际上,您需要使用现成的解决方案来完成这项任务(例如标签、手风琴、面板)。
<div class="navbar-header">
<div class="navbar-header">
<div id="toggle-menu" ng-click="isShowSideBarMobile = !isShowSideBarMobile;isShowRightContent = false;"><i class="fa fa-bars fa-3x"></i><button>isShowSideBarMobile</button></div>
<div id="toggle-function" ng-click="isShowRightContent = !isShowRightContent;isShowSideBarMobile = false;"><i class="fa fa-ellipsis-v fa-3x"></i><button>isShowRightContent</button></div>
</div>
</div>
<div id="sidebar-mobile-wrapper" class="container-fluid" ng-show="isShowSideBarMobile && !isShowRightContent">sidebar-mobile-wrapper</div>
<div id="right-content-mobile" class="container-fluid" ng-show="isShowRightContent && !isShowSideBarMobile">right-content-mobile</div>
仅使用MobileMenucollapsed
变量:
<div class="navbar-header">
<div class="navbar-header">
<div id="toggle-menu" ng-click="mobileMenuCollapsed = !mobileMenuCollapsed"><i class="fa fa-bars fa-3x"></i></div>
<div id="toggle-function" ng-click="mobileMenuCollapsed = !mobileMenuCollapsed"><i class="fa fa-ellipsis-v fa-3x"></i></div>
</div>
</div>
<div id="sidebar-mobile-wrapper" class="container-fluid" ng-show="!mobileMenuCollapsed"></div>
<div class="container-fluid right-content-mobile" ng-show="mobileMenuCollapsed"></div>