标签: accordion

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

谢谢!

我在页面上有一个相当基本的jQuery Accordion实现(使用1.3.2,jQuery UI Core 1.72和jQuery UI Accordion 1.7.2),我希望在页面加载时打开第2部分.我尝试了很多方法,但似乎没有任何工作......

头文:

<script type="text/javascript"> $(function() {
    $("#accordion").accordion({
        event: "mouseover"
    });

});

身体手风琴:

<div id="accordion">
<h3><a href="#">Headline 001</a></h3>
<div>
<ul>
     <li><a href="#1">Link 001</a></li>
     <li><a href="#2">Link 002</a></li>
     </ul>
</div>
<h3><a href="#">Headline 002</a></h3>
<div>
     <ul>
    <li><a href="#3">Link 003</a></li>
     <li><a href="#4">Link 004</a></li>
     </ul>
</div>

任何帮助将不胜感激!

我正在使用Boostrap框架,但我对手风琴有问题.当我试图在同一页面上添加2个bootstrap手风琴http://twitter.github.com/bootstrap/javascript.html#collapse时,只有一个可以正常工作.有人如何在同一页面上添加2个这些手风琴？

感谢你的时间.

我喜欢jQuery手风琴的功能(http://jqueryui.com/demos/accordion/)但是我不喜欢这种风格!

我想摆脱所有款式,img,边框,颜色等......

我没有看到这个选项,这是他们应该添加的.或者我错了？

我想让一个更大的形式更友好.在特殊情况下使用了许多字段,这些字段隐藏在手风琴容器内,如果需要,可以使用链接来展示它们.

但是(至少在Chrome中)如果您选择字段,则最终会将焦点放在视图中隐藏但键盘输入可访问的字段上.

什么是Good™处理方法？使用jQuery根据display!= none设置tabindex,然后在手风琴事件发生时重新设置？也许当CSS隐藏的字段获得焦点时,封闭的手风琴会被打开？

这是一个使用下面的html演示问题的jsfiddle.选项卡从可见到手风琴链接到隐藏文本输入和最后可见:http://jsfiddle.net/2EfXM/

<p class="file_info">
    <label>Visible
        <input type="text" name="vis1" id="vis1" class="date" value="" />
    </label>
</p>
<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading"> <a class="accordion-toggle accordion-arrow" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Show more fields
      </a>

        </div>
        <div id="collapseOne" class="accordion-body collapse out">
             <h5>Source/Use Metadata</h5>

            <p class="file_info">
                <label>Hidden:
                    <input type="text" name="default_original_source" id="default_original_source" class="" value="" />
                </label>
            </p>
        </div>
    </div>
</div>
<p class="file_info">
    <label>Visible
        <input type="text" name="vis2" id="vis2" class="date" value="" />
    </label>
</p>

一个有趣的旁注:使用display:none然后在IE 9中打破了jQuery验证.它在隐藏字段上引发了错误:

SCRIPT5007: Unable to get …

我在网页上有一个基于jQuery Accordion的简单菜单.我稍微简化了代码,它看起来像这样;

<div id="menu_div" class="nt-tab-outer nt-width-150px">

<h3 class="nt-tab-title"><a href="#">Menu A</a></h3>
<div id="menu_1_div">
  <a href="itemA1">Item A1</a><br />
  <a href="itemA2">Item A2</a><br />
</div>

<h3 class="nt-tab-title"><a href="#">Menu B</a></h3>
<div id="menu_2_div">
  <a href="fTabsDyn">Item B1</a><br />
  <a href="fPlainDyn">Item B2</a><br />
</div>

</div>

<script type="text/javascript">
jQuery(function() {
 jQuery("#menu_div").accordion({
  active: 1,
  change: function(event, ui) { 
      alert('bob');
  }})
});

</script>

当页面打开时,这将设置手风琴的第二个"部分".(活动:1)如果单击任一标题,则会弹出一个简单的警报"bob".到现在为止还挺好.

现在我想用标题的索引替换"bob".所以"活跃"的"阅读"版本.也就是说,当点击第一个手风琴标题时,我得到0,如果点击第二个标题,我得到1.

(除此之外,我当然不想做一个Alert,我想用值来对服务器进行Ajax调用,所以服务器知道客户端打开了哪个菜单.那部分我可以做,但是我我正在努力获得正确的发送价值.如果索引不可用,请随时提供其他建议.

谢谢!

关于SO的几个问题引用了这个开放的jQuery UI功能请求,可以从Accordion小部件动态添加/删除面板.票证本身已标记(已关闭的功能:已修复),从我从单元测试中可以看出的内容以及来自其Git存储库的提示,它似乎在最新版本中实现.

但是,如果我尝试像上面的单元测试中那样添加div:

var element = $("#accordion");
$("#accordion").append("<h3>3</h3><div>3</div>");
$("#accordion").accordion("refresh");

我无法让它发挥作用.

但是这种方法有效:

$("#accordion").append("<h3>sec</h3<div>test</div>").accordion("destroy").accordion();

但我不想"摧毁"手风琴,我只想追加(或前置)一个元素并刷新它.

看看我在Chrome的检查器中添加的div显示我添加的元素没有添加与手风琴其余部分相同的CSS样式:

我的引导手风琴演员性格乖!我创建了三个面板显示在列网格中,但第二和第三个折叠菜单关闭了错误的菜单(例如,单击/打开menu2然后单击/打开menu3将关闭menu2,然后再打开menu3).

知道为什么吗？

代码在这里:

        <div class="row">
            <div class="col-sm-6 col-md-4">
                <div class="panel-group">
                    <div class="panel panel-default">
                        <a class="panel-default" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                            My Story
                            </h4>
                        </div>
                        </a>
                        <div id="collapseOne" class="panel-collapse collapse">
                            <div class="panel-body">
                            Content
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <div class="panel-group" id="accordion">
                    <div class="panel panel-default">
                        <a class="panel-default" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                            My Skills
                            </h4>
                        </div>
                        </a>                            
                        <div id="collapseTwo" class="panel-collapse collapse in">
                            <div class="panel-body">
                            Content
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <div class="panel-group" …

使用Bootstrap 3,我试图使用子导航锚链接(即index.php#wnsh)来扩展指定的手风琴并将页面锚定到内容.我已经尝试过搜索示例但运气不佳,可能是因为我的手风琴结构与给定的BS3示例不同.这是我的HTML:

更新:

对代码进行了一些更新,但它仍然没有打开哈希指定的手风琴.有进一步的想法？

            <div id="accordion" class="accordion-group">                
                <div class="panel">
                    <h4 id="cs" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#cs_c">Child Survival: Boosting Immunity and Managing Diarrhoea</a></h4>
                    <div id="cs_c" class="accordion-collapse collapse in">
                        <p>...</p>
                    </div>

                    <h4 id="chgd" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#chgd_c">Child Health, Growth and Development: Preventing Mental Impairment with Iodine and Iron</a></h4>
                    <div id="chgd_c" class="accordion-collapse collapse">
                        <p>...</p>
                    </div>

                    <h4 id="wmnh" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#wmnh_c">Women’s and Newborn Survival and Health: Iron Supplementation and Food Fortification</a></h4>
                    <div id="wmnh_c" class="accordion-collapse collapse">
                        <p>...</p>
                    </div>
                </div>
            </div>

JS

var elementIdToScroll =  window.location.hash; …

我想替换一个允许用户使用Bootstrap折叠手风琴"阅读更多"的脚本.我的问题是,据我所见,手风琴是打开还是关闭.

有没有人知道在封闭模式下显示某些文本的选项？

在我正在使用的脚本中,我可以通过更改文本区域的高度来显示一些文本,但在Bootstrap中此选项不起作用.当我更改.in或.out(控制文本区域高度的css)的高度时,它只是打开和关闭直到该高度.有人为此找到了解决方法吗？

我的HTML:

<div class="accordion" id="accordion2"> 
  <div class="accordion-group"> 
    <div class="accordion-heading"> 
      <a class="accordion-toggle"  href="#collapseOne"
         data-toggle="collapse" data-parent="#accordion2">
        TITLE OF THE COLLAPSE 
    </a> 
    </div> 
    <div id="collapseOne" class="accordion-body collapse in"> 
      <div class="accordion-inner"> 
        DATA IN THE COLLAPSE 
      </div> 
    </div>
  </div>
</div>