标签: accordion

我有两个手风琴.

手风琴1:路由器信息(包含gridRouter)

手风琴2:UNC信息(包含gridUNC)

如果gridRouter包含2条记录而gridUNC包含30条记录,则手风琴1占用30条记录(不是2条记录)

我正在使用Jquery Accordion.活动链接具有轮廓.我试过用css:

#accordion a:focus
 { outline: none; }
#accordion a:active 
{outline: none; font-weight:bold;}

并且

#accordion a:-moz-any-link:focus 
{ outline: none; }

这些似乎都不起作用.任何人都可以建议设置或其他选项删除活动链接周围的虚线轮廓？

我是一个jquery/javascript新手.我想要做的是在开放式手风琴标题中添加一个类,并在打开另一个时删除它.

继承人代码:

<div class="accordion" data-collapse-type="manual" id="parent">
  <div class="accordion-group">
    <div class="accordion-heading">             
      <a class="accordion-toggle category" data-toggle="collapse" data-parent="#parent" href="#category1">Category 1
      </a>
    </div><!--/accordion-heading-->
    <div id="category1" class="accordion-body collapse">
      <ul class="accordion-inner unstyled">
        <li id="" class="sidelink"><a href="">Open Link 1</a></li>
        <li id="" class="sidelink"><a href="">Open Link 2</a></li>
        <li id="" class="sidelink"><a href="">Open Link 3</a></li>
      </ul>
    </div><!--/category1-->
  </div><!--/accordion-group-->
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle category" href="#Category2">Category 2</a>
    </div><!--/accordion-heading-->
  </div><!--/accordion-group-->
</div><!--/accordion-->

我附在页面上的脚本是

<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.tools.min.js"></script>

所以我想要的是在菜单打开时(手风琴式)将.active类添加到a.accordion-toggle,然后一旦选择了另一个就让它消失.我看过这里的文档引导程序,但它似乎没有帮助我很多(因为我不知道如何处理

$('#myCollapsible').on('hidden',function(){//做某事......})

或者在哪里放置它)我也尝试过.addClass() jquery加法器,但我只能得到javascript版本document.getElementById("accordion-heading").className + ="newClass"; 工作(如果我给手风琴组冠军一个ID,但在这种情况下会有多个手风琴组)当我把脚本放在div层之后.

是否有可能在JavaFX中拥有一个超过1个开放式窗格的手风琴？

我正在使用Bootstrap制作一个响应式网站,它包含大量文本的手风琴,当你读到底部并点击下一个手风琴时,大量文字被折叠,我留在页面底部.

我发现这个有用的代码从Bootstrap手风琴滚动到活动面板标题的顶部,但它滚动到所有手风琴的顶部,而不是打开的特定手风琴.

$(function () {
        $('#accordion').on('shown.bs.collapse', function (e) {
            var offset = $('.panel.panel-default > .panel-collapse.in').offset();
            if(offset) {
                $('html,body').animate({
                    scrollTop: $('.panel-heading').offset().top -20
                }, 500); 
            }
        }); 
    });

如何修改此代码以滚动到当前活动的手风琴的顶部？

HTML;

  <div class="panel-group custom-padding no-sides" id="accordion">                
                        <div class="panel panel-default">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                                <div class="panel-heading custom-padding">
                                    <h4 class="panel-title text-uppercase">Short synopsis <i class="fa fa-chevron-down pull-right"></i></h4>
                                </div>
                            </a>
                            <div id="collapse1" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <p id="game-deck"></p>
                                </div>
                            </div>
                        </div>                       
                        <div class="panel panel-default">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                                <div class="panel-heading custom-padding">
                                    <h4 class="panel-title text-uppercase">Concepts <i …

更新

我将其作为社区维基,原因有三:

• 我不觉得我得到了明确的答案,但是
• 我很久以前就不再需要答案,因为我推出了自己的手风琴功能
• 这个问题得到了很多观点,很明显很多人仍然感兴趣

因此,如果有人想要更改/澄清这个问题并使其成为权威指南,请成为我的客人.

我正在使用jQuery的手风琴UI元素处理页面.我在那个例子上建模我的HTML,除了在<li>元素内部,我有一些无序的链接列表.像这样:

  $(document).ready(function() {
     $(".ui-accordion-container").accordion(
        {active: "a.default", alwaysOpen: true, autoHeight: false}
     );
  });

  <ul class="ui-accordion-container">
  <li> <!-- Start accordion section -->
   <a href='#' class="accordion-label">A Group of Links</a>
   <ul class="linklist">
      <li><a href="http://example.com">Example Link</a></li>
      <li><a href="http://example.com">Example Link</a></li>
   </ul>

   <!--and of course there's another group -->

问题:IE动画很臭

虽然IE7动画文档的示例手风琴菜单很好,但它有我的问题.具体来说,页面上的一个手风琴菜单急剧移动并且内容闪烁. 我知道这不是一个CSS问题,因为如果我不包含我的CSS文件会发生同样的事情.

页面上的另一个手风琴菜单会打开您单击的第一个部分,之后将不会打开它们中的任何一个.

这两个问题都是特定于IE的,如果我使用该选项,它们都会消失animated: false.但是我想保留默认slide动画,因为它可以帮助用户理解菜单正在做什么.

还有另外一种方法吗？

我想使用可扩展组在我的项目中集成手风琴,但对于最近的项目,我需要演绎扩展文本或更准确地溢出内容的手风琴.

你能告诉我它会怎么做ionic 2吗？

我从bootstrap得到这个手风琴的东西.箭头图标指向下方.

然后我点击Competency1,我得到(Competency1 icon up,Competency2 icon down):

但是,如果我现在点击Competency2,我会得到(Competency1图标仍在运行,Competency2图标向上):

这是引导程序中的错误,还是可以轻松修复？

谢谢.

我用谷歌搜索并发现如何在这里响应Bootstrap 3 tab to accordion使用Bootstrap 3选项卡,但是我使用的是Bootstrap 4,我不知道如何将它转换为Bootstrap 4 tab到手风琴.请帮我.

谢谢!

我有一个窗口,里面有很多内容.我希望能够使用面板分离内容,并有一个分隔符,用户可以单击每个面板之间的切换(使用动画从左到右移动分隔符,显示一个部分并隐藏另一个) .想想Microsoft Office(2007)导航窗格.有没有一种简单的方法来实现这一目标？

谢谢!