草庐IT

javascript - 没有 Bootstrap 面板标记的 Bootstrap Accordion

coder 2025-03-24 原文

是否有任何可行的方法可以在不使用“面板”标记的情况下创建自举 Accordion 控件?我有折叠控件,但我希望能够为控件中的每个部分定位父级。

换句话说,我希望“收入”和“利润”桶相互切换,并且“收入”内部有“收入当前”、“收入基础”和“收入当前与基础”相互切换其他不干扰父层。

http://jsfiddle.net/Lp903gc5/

标记

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

有关javascript - 没有 Bootstrap 面板标记的 Bootstrap Accordion的更多相关文章

  1. ruby - 难道Lua没有和Ruby的method_missing相媲美的东西吗? - 2

    我好像记得Lua有类似Ruby的method_missing的东西。还是我记错了? 最佳答案 表的metatable的__index和__newindex可以用于与Ruby的method_missing相同的效果。 关于ruby-难道Lua没有和Ruby的method_missing相媲美的东西吗?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/7732154/

  2. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个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";我尝试了所有不同的路径格式,但它

  3. ruby-on-rails - rails 目前在重启后没有安装 - 2

    我有一个奇怪的问题:我在rvm上安装了ruby​​onrails。一切正常,我可以创建项目。但是在我输入“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(

  4. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem,所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  5. 没有类的 Ruby 方法? - 2

    大家好!我想知道Ruby中未使用语法ClassName.method_name调用的方法是如何工作的。我头脑中的一些是puts、print、gets、chomp。可以在不使用点运算符的情况下调用这些方法。为什么是这样?他们来自哪里?我怎样才能看到这些方法的完整列表? 最佳答案 Kernel中的所有方法都可用于Object类的所有对象或从Object派生的任何类。您可以使用Kernel.instance_methods列出它们。 关于没有类的Ruby方法?,我们在StackOverflow

  6. ruby-on-rails - Rails 3,嵌套资源,没有路由匹配 [PUT] - 2

    我真的为这个而疯狂。我一直在搜索答案并尝试我找到的所有内容,包括相关问题和stackoverflow上的答案,但仍然无法正常工作。我正在使用嵌套资源,但无法使表单正常工作。我总是遇到错误,例如没有路线匹配[PUT]"/galleries/1/photos"表格在这里:/galleries/1/photos/1/edit路线.rbresources:galleriesdoresources:photosendresources:galleriesresources:photos照片Controller.rbdefnew@gallery=Gallery.find(params[:galle

  7. ruby-on-rails - 有没有办法为 CarrierWave/Fog 设置上传进度指示器? - 2

    我在Rails应用程序中使用CarrierWave/Fog将视频上传到AmazonS3。有没有办法判断上传的进度,让我可以显示上传进度如何? 最佳答案 CarrierWave和Fog本身没有这种功能;你需要一个前端uploader来显示进度。当我不得不解决这个问题时,我使用了jQueryfileupload因为我的堆栈中已经有jQuery。甚至还有apostonCarrierWaveintegration因此您只需按照那里的说明操作即可获得适用于您的应用的进度条。 关于ruby-on-r

  8. ruby - 没有类方法获取 Ruby 类名 - 2

    如何在Ruby中获取BasicObject实例的类名?例如,假设我有这个:classMyObjectSystem我怎样才能使这段代码成功?编辑:我发现Object的实例方法class被定义为returnrb_class_real(CLASS_OF(obj));。有什么方法可以从Ruby中使用它? 最佳答案 我花了一些时间研究irb并想出了这个:classBasicObjectdefclassklass=class这将为任何从BasicObject继承的对象提供一个#class您可以调用的方法。编辑评论中要求的进一步解释:假设你有对象

  9. ruby - 没有轨道的 ActiveRecord 时区 - 2

    我在非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

  10. ruby-on-rails - 没有这样的文件或目录 - 用 Mini Magick 识别 - 2

    在我让另一个人重做我的前端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

随机推荐