提问者:小点点

在角度中显示/隐藏/切换JS


我有两个按钮导航栏。

<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等。


共2个答案

匿名用户

找这个。我希望这正是你需要的。实际上,您需要使用现成的解决方案来完成这项任务(例如标签、手风琴、面板)。

  <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>