Twitter的引导折叠效果不工作的菜单 [英] twitter bootstrap accordion effect not working for menu
本文介绍了Twitter的引导折叠效果不工作的菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我和子菜单的父菜单，但手风琴效果不工作的菜单。（如果第二个菜单链接点击，自动第一个菜单应该关闭）
我已经创建了code在plunker，
http://plnkr.co/edit/yCO19F8f29tipZoM5uII?p=$p$ PVIEW
视图
＆LT; DIV ID =侧边栏包装＆GT;
＆LT; UL类=面板侧边栏导航NG重复=模型项|排序依据：'中将sortOrder'＆GT;
＆LT;立GT;
＆LT;一类=下拉拨动MAINMENU menuArrow的href =JavaScript的：无效（0）＆GT; {{item.description}}
＆LT; I类=sub_icon发FA-LG FA-FW {item.iconTarget}}＆GT;＆LT; / I＆GT;
＆所述; / A＆GT;
＆LT; UL类=子的风格=显示：无;＆GT;
＆LT;李NG重复=子项中item.children＆GT;
＆LT; A HREF =＃{{subitem.target}}级=字幕＆GT; {{subitem.description}}＆下; / A＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
解决方案
回来，（累了一天...）并承诺：
-
比
纳克级（就像我刚才说的），我建议的角UI （ Twitter的引导本地书面更好在AngularJS ）＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=ui.bootstrap.demo＆GT;
＆LT; HEAD＆GT;
＆所述; SCRIPT SRC =http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js＆GT;＆下; /脚本＆GT;
＆LT;链接HREF =http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css的rel =stylesheet属性＆GT;
＆LT;脚本＆GT;//这里在JavaScript文件（这里是一个演示）
angular.module（'ui.bootstrap.demo'，['ui.bootstrap']）;
angular.module（'ui.bootstrap.demo'）。控制器（'AccordionDemoCtrl'，函数（$范围）{
$ scope.oneAtATime =真; $ scope.model = [
{
code：401
说明：交易，
标签：空，
目标：空，
孩子：
{
说明：存入资金，
目标：transds
孩子：空
}，
{
说明：取款，
目标：fdfdfs
孩子：空
}
]
}，
{
code：403 说明：现金管理，
标签：空，
目标：空，
孩子：
{
说明：头出纳 - 输入，
目标：ccry.html
孩子：空
}，
{
说明：头出纳 - 验证
目标：ccg.html
孩子：空
}
]
}
];}）; ＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;＆LT; DIV NG控制器=AccordionDemoCtrl＆GT;
＆LT;标签类=复选框＆GT;
＆LT;输入类型=复选框NG模型=oneAtATime＆GT;
打开在同一时间只有一个
＆LT; /标签＆gt;
＆所述p为H.;实施例惊人角手风琴与所述; / P＆GT; ＆LT;手风琴近他人=oneAtATime＆GT;
＆LT; DIV NG重复=模型项|排序依据：'中将sortOrder'＆GT;
＆LT;手风琴组＆gt;
＆LT;手风琴标题＆GT;
{{item.description}}＆LT; I类=sub_icon发FA-LG FA-FW {{item.iconTarget}}＆GT;＆LT; / I＆GT;
＆LT; /手风琴标题＆GT; ＆LT; DIV NG重复=子项中item.children＆GT;
＆LT; A HREF =＃{{subitem.target}}级=字幕＆GT; {{subitem.description}}＆下; / A＆GT;
＆LT; / DIV＆GT;
＆LT; /手风琴组＆gt;
＆LT; / DIV＆GT;
＆LT; /手风琴与GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT; -
接下来我让你将自己的CSS，并在文件移动JS。
I have parent menu with sub menus, but the accordion effect is not working for menus.(if second menu link clicks, automatically the first menu should close)
I have created the code in plunker,
http://plnkr.co/edit/yCO19F8f29tipZoM5uII?p=preview
view
<div id="sidebar-wrapper">
<ul class="panel sidebar-nav" ng-repeat="item in model | orderBy:'sortOrder'">
<li>
<a class="dropdown-toggle mainMenu menuArrow" href="javascript:void(0)" >{{item.description}}
<i class="sub_icon fa fa-lg fa-fw {item.iconTarget}}"></i>
</a>
<ul class="submenu" style="display: none;">
<li ng-repeat="subitem in item.children">
<a href="#{{subitem.target}}" class="subTitle"> {{subitem.description}} </a>
</li>
</ul>
</li>
</ul>
</div>
解决方案
back, (after a hard day...) and as promise :
better than
ng-Class(like I said earlier), I suggest Angular UI (Twitter Bootstrap written natively in AngularJS)<!doctype html> <html ng-app="ui.bootstrap.demo"> <head> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script> <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> <script> //here in your javascript file (here is a demo) angular.module('ui.bootstrap.demo', ['ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) { $scope.oneAtATime = true; $scope.model = [ { "code": "401", "description": "Transactions", "labelName": null, "target": null, "children": [ { "description": "Deposit Funds", "target": "transds", "children": null }, { "description": "Withdraw Funds", "target": "fdfdfs", "children": null } ] }, { "code": "403", "description": "Cash Management", "labelName": null, "target": null, "children": [ { "description": "Head Cashier - Entry", "target": "ccry.html", "children": null }, { "description": "Head Cashier - Verify", "target": "ccg.html", "children": null } ] } ]; }); </script> </head> <body> <div ng-controller="AccordionDemoCtrl"> <label class="checkbox"> <input type="checkbox" ng-model="oneAtATime"> Open only one at a time </label> <p>Example amazing angular accordion</p> <accordion close-others="oneAtATime" > <div ng-repeat="item in model | orderBy:'sortOrder'"> <accordion-group> <accordion-heading> {{item.description}} <i class="sub_icon fa fa-lg fa-fw {{item.iconTarget}}"></i> </accordion-heading> <div ng-repeat="subitem in item.children"> <a href="#{{subitem.target}}" class="subTitle"> {{subitem.description}} </a> </div> </accordion-group> </div> </accordion> </div> </body> </html>Next I let you apply your own css and move js in a file.
这篇关于Twitter的引导折叠效果不工作的菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
