Javascript 在AngularJS中显示/隐藏/切换
我有两个按钮的导航栏Javascript 在AngularJS中显示/隐藏/切换,javascript,angularjs,Javascript,Angularjs,我有两个按钮的导航栏 <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
<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#切换菜单时,显示div#侧边栏移动包装器
<div id="sidebar-mobile-wrapper" class="container-fluid" ng-show="isShowSideBarMobile"></div>
<div class="container-fluid right-content-mobile" ng-show="isShowRightContent"></div>
当我点击div#toggle函数时,就会显示div#right content mobile
<div id="sidebar-mobile-wrapper" class="container-fluid" ng-show="isShowSideBarMobile"></div>
<div class="container-fluid right-content-mobile" ng-show="isShowRightContent"></div>
一切都成功了。但现在我想,一次只能显示一个div。因此,当我单击“切换”菜单时,如果div#right content mobile可见,它将被隐藏和侧边栏mobile wrapper等 将具有模型值的工作合并到控制器中是一个非常好的主意,这样您就可以轻松地更改行为 您可以使用以下方法:
<div class="navbar-header">
<div id="toggle-menu" ng-click="contentToggle('mobile')">Toggle mobile</div>
<div id="toggle-function" ng-click="contentToggle('right')">Toggle right</div>
</div>
<div ng-show="isContentToggled('mobile')">
<strong>Mobile content</strong>
</div>
<div ng-show="isContentToggled('right')">
<strong> Right content</strong>
</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>
查找。我希望这正是你所需要的。实际上,您需要为此任务使用现成的解决方案(例如选项卡、手风琴、面板)
isShowSideBarMobile
isShowRightContent
边栏移动包装器
右内容移动
为什么不使用一个变量并在ng show
中检查它的值?我以前做过,但它没有按我想要的方式工作。你是什么意思我想要的方式
?对不起,我的英语太差了。“一次只能显示一个div。因此,当我单击#切换菜单时,如果div#right content mobile可见,它将被隐藏和侧边栏mobile wrapper等。”请参阅下文,谢谢。这是最简单的方法。