是否有任何可行的方法可以在不使用“面板”标记的情况下创建自举 Accordion 控件?我有折叠控件,但我希望能够为控件中的每个部分定位父级。
换句话说,我希望“收入”和“利润”桶相互切换,并且“收入”内部有“收入当前”、“收入基础”和“收入当前与基础”相互切换其他不干扰父层。
标记
<div class="group-by">
<div class="jstree-preview group-dropdown">
<ul id="j3_1">
<li>
<span data-toggle="collapse" href="#collapse-j3_2" data-parent="#j3_1" aria-expanded="false" class="collapsed">
<span>Revenue</span>
<i class="icon icon-arrow-right"></i>
</span>
<ul class="collapse" id="collapse-j3_2" aria-expanded="false" style="height: 0px;">
<li>
<span data-toggle="collapse" href="#collapse-j3_3">
<span>Revenue Current </span>
<i class="icon icon-arrow-right"></i>
</span>
<ul class="collapse" id="collapse-j3_3">
<li>
<span>Extended Zone Price</span>
</li>
<li>
<span>Net Amount</span>
</li>
<li>
<span>Revenue</span>
</li>
<li>
<span>Revenue Share at DN</span>
</li>
</ul>
</li>
<li>
<span data-toggle="collapse" href="#collapse-j3_8">
<span>Revenue Base</span>
<i class="icon icon-arrow-right"></i>
</span>
<ul class="collapse" id="collapse-j3_8">
<li>
<span>Extended Zone Price</span>
</li>
<li>
<span>Net Amount</span>
</li>
<li>
<span>Revenue</span>
</li>
<li>
<span>Revenue Share at DN</span>
</li>
</ul>
</li>
<li>
<span data-toggle="collapse" href="#collapse-j3_13">
<span>Revenue Current Vs Base</span>
<i class="icon icon-arrow-right"></i>
</span>
<ul class="collapse" id="collapse-j3_13">
<li>
<span>Matched Base Revenue</span>
</li>
<li>
<span>Matched Current Revenue</span>
</li>
<li>
<span>Matching %</span>
</li>
<li>
<span>New Sales Revenue</span>
</li>
<li>
<span>Non-Repeat Revenue</span>
</li>
<li>
<span>Normalized Base Revenue</span>
</li>
<li>
<span>Revenue Change %</span>
</li>
<li>
<span>Revenue Volume Change $</span>
</li>
<li>
<span>Total Revenue Change $</span>
</li>
</ul>
</li>
</ul>
<span data-toggle="collapse" href="#collapse-j3_23" data-parent="#j3_1" aria-expanded="false" class="collapsed">
<span>Margin</span>
<i class="icon icon-arrow-right"></i>
</span>
<ul class="collapse" id="collapse-j3_23" aria-expanded="false" style="height: 0px;">
<li>
<span data-toggle="collapse" href="#collapse-j3_24">
<span>Margin Current</span>
<i class="icon icon-arrow-right"></i>
</span>
<ul class="collapse" id="collapse-j3_24">
<li>
<span>In-scope Margin Index</span>
</li>
<li>
<span>Margin</span>
</li>
<li>
<span>Margin %</span>
</li>
<li>
<span>Margin per Unit</span>
</li>
</ul>
</li>
<li>
<span data-toggle="collapse" href="#collapse-j3_29">
<span>Margin Base</span>
<i class="icon icon-arrow-right"></i>
</span>
<ul class="collapse" id="collapse-j3_29">
<li>
<span>In-scope Margin Index</span>
</li>
<li>
<span>Margin</span>
</li>
<li>
<span>Margin %</span>
</li>
<li>
<span>Margin per Unit</span>
</li>
</ul>
</li>
<li>
<span data-toggle="collapse" href="#collapse-j3_34">
<span>Margin Current Vs Base</span>
<i class="icon icon-arrow-right"></i>
</span>
<ul class="collapse" id="collapse-j3_34">
<li>
<span>Margin % Change (bps)</span>
</li>
<li>
<span>Margin Volume Change $</span>
</li>
<li>
<span>Matched Base Margin</span>
</li>
<li>
<span>Matched Current Margin</span>
</li>
<li>
<span>New Sales Margin</span>
</li>
<li>
<span>Non-Repeat Margin</span>
</li>
<li>
<span>Normalized Base Margin</span>
</li>
<li>
<span>Total Margin % Change</span>
</li>
<li>
<span>Total Margin Change $</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
最佳答案
bootstrap 的 3.x 版本需要 panel添加到 data-parent 中切换器 + 切换器容器的类.
在您的示例中,这可以简单地通过添加 class="panel" 来完成到 <li> 的第一和第二深度元素。我在这里使用您的代码做了一个例子:
http://www.bootply.com/15nIagFMbk
在一个更简单的例子中:
<ul id="accordion">
<li class="panel">
<a href="#c1" data-toggle="collapse" data-parent="#accordion" class="collapsed">
Toggle 1
</a>
<p id="c1" class="collapse">
Some collapsable text 1
</p>
</li>
<li class="panel">
<a href="#c2" data-toggle="collapse" data-parent="#accordion" class="collapsed">
Toggle 2
</a>
<p id="c2" class="collapse">
Some collapsable text 2
</p>
</li>
<li class="panel">
<a href="#c3" data-toggle="collapse" data-parent="#accordion" class="collapsed">
Toggle 3
</a>
<p id="c3" class="collapse">
Some collapsable text 3
</p>
</li>
</ul>
关于javascript - 没有 Bootstrap 面板标记的 Bootstrap Accordion ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29654978/
我好像记得Lua有类似Ruby的method_missing的东西。还是我记错了? 最佳答案 表的metatable的__index和__newindex可以用于与Ruby的method_missing相同的效果。 关于ruby-难道Lua没有和Ruby的method_missing相媲美的东西吗?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/7732154/
我有一个ModularSinatra应用程序,我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件,包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式,但它
我有一个奇怪的问题:我在rvm上安装了rubyonrails。一切正常,我可以创建项目。但是在我输入“railsnew”时重新启动后,我有“程序'rails'当前未安装。”。SystemUbuntu12.04ruby-v"1.9.3p194"gemlistactionmailer(3.2.5)actionpack(3.2.5)activemodel(3.2.5)activerecord(3.2.5)activeresource(3.2.5)activesupport(3.2.5)arel(3.0.2)builder(3.0.0)bundler(1.1.4)coffee-rails(
我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem,所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re
大家好!我想知道Ruby中未使用语法ClassName.method_name调用的方法是如何工作的。我头脑中的一些是puts、print、gets、chomp。可以在不使用点运算符的情况下调用这些方法。为什么是这样?他们来自哪里?我怎样才能看到这些方法的完整列表? 最佳答案 Kernel中的所有方法都可用于Object类的所有对象或从Object派生的任何类。您可以使用Kernel.instance_methods列出它们。 关于没有类的Ruby方法?,我们在StackOverflow
我真的为这个而疯狂。我一直在搜索答案并尝试我找到的所有内容,包括相关问题和stackoverflow上的答案,但仍然无法正常工作。我正在使用嵌套资源,但无法使表单正常工作。我总是遇到错误,例如没有路线匹配[PUT]"/galleries/1/photos"表格在这里:/galleries/1/photos/1/edit路线.rbresources:galleriesdoresources:photosendresources:galleriesresources:photos照片Controller.rbdefnew@gallery=Gallery.find(params[:galle
我在Rails应用程序中使用CarrierWave/Fog将视频上传到AmazonS3。有没有办法判断上传的进度,让我可以显示上传进度如何? 最佳答案 CarrierWave和Fog本身没有这种功能;你需要一个前端uploader来显示进度。当我不得不解决这个问题时,我使用了jQueryfileupload因为我的堆栈中已经有jQuery。甚至还有apostonCarrierWaveintegration因此您只需按照那里的说明操作即可获得适用于您的应用的进度条。 关于ruby-on-r
如何在Ruby中获取BasicObject实例的类名?例如,假设我有这个:classMyObjectSystem我怎样才能使这段代码成功?编辑:我发现Object的实例方法class被定义为returnrb_class_real(CLASS_OF(obj));。有什么方法可以从Ruby中使用它? 最佳答案 我花了一些时间研究irb并想出了这个:classBasicObjectdefclassklass=class这将为任何从BasicObject继承的对象提供一个#class您可以调用的方法。编辑评论中要求的进一步解释:假设你有对象
我在非Rails项目中使用ActiveRecord。在Rails中,我可以这样做:config.time_zone='EasternTime(US&Canada)'config.active_record.default_timezone='EasternTime(US&Canada)'但如果我不使用rails,我该如何设置时区? 最佳答案 ActiveRecord::Base.default_timezone='EasternTime(US&Canada)' 关于ruby-没有轨道的A
在我让另一个人重做我的前端UI之前,我的Rails应用程序运行平稳。我已经尝试解决此错误3天了。这是错误:Nosuchfileordirectory-identifyExtractedsource(aroundline#59):575859606162@post=Post.find(params[:id])authorize@postif@post.update_attributes(post_params)flash[:notice]="Postwasupdated."redirect_to[@topic,@post]else{"utf8"=>"✓","_method"=>"patc