标签: collapsable

我正在使用数据表插件进行分页..现在我想要点击表格的每一行都有可折叠的功能...

这是我的代码片段:

 <tr class="outer-tr">
     <td>1</td>
     <td>pppol</td>
     <td>Approved</td>
</tr>
<tr class="inner-tr"> 
       <td>show-hide</td> 
</tr> 

而我正在隐藏/显示inner-tr点击outer-tr.
但它给出了一个错误:

 Uncaught TypeError: Cannot read property 'className' of undefined 

我知道这是因为表格格式不正确而发生的.

任何建议用数据表插件实现可折叠表???

有没有办法在jQuery Mobile中制作可折叠的元素/集合而不是插入？默认情况下,它将可折叠元素作为插入项.

data-inset="false" 不改变行为.

我已经检查了一些样本,但没有一个与我正在尝试的完全相同.

我的作品大部分都是有效的,但它并不能正常工作.

这是解释问题的小提琴.

http://jsfiddle.net/5yA6G/4/

请注意,顶部集合工作正常,但它是静态定义的.

底部集合(Tom,steve,bob)基本上"工作",但是标题元素最终都在可折叠标题和可折叠部分中被隐藏.

好像我一定做错了什么,但我还没弄清楚是什么.

有任何想法吗？

我使用了jsfiddle 68RXP中 的示例collapse-group创建了一个可扩展的div：

HTML：

<div class="span4 collapse-group">
     <h2>Heading</h2>
     <p class="collapse">Lorem ipsum</p>
     <p><a class="btn" href="#">View details &raquo;</a></p>
</div>

Javascript：

$('.row .btn').on('click', function(e) {
    e.preventDefault();
    var $this = $(this);
    var $collapse = $this.closest('.collapse-group').find('.collapse');
    $collapse.collapse('toggle');
});

当btn按下时，p类展开和折叠模式之间切换。

我试图对递归可折叠div使用相同的概念：

<div class="collapse-group">
    <p><a class="btn" href="#">Open outer div &raquo;</a></p>
    <div class="collapse">
        <h2>Outer div title</h2>
        <p>Outer div text</p>
        <div class="collapse-group">
            <p><a class="btn" href="#">Open inner div &raquo;</a></p>
            <div class="collapse">
                <h2>Inner div title</h2>
                <p>Inner div text</p>
             </div>
         </div>
    </div>
</div>

与以前相同的js代码，请参阅jsFiddle …

我已经有一段时间了，这是怎么回事。我在mobx Storage中有一个数组，希望在我的React本机组件的Flatlist中的可折叠视图中显示。这里的问题是，当我单击它时，它确实会更改状态，但不会执行操作。经过一番研究，我在NativeBase中找到了一个手风琴，并在成功的小型测试之后尝试实现它。不幸的是，它无法识别出不是对象的数组索引值。因此，第一个问题与有关mobx动作的关闭和打开可折叠动作有关，第二个问题是无法从数组读取索引值的手风琴。如果任何人都可以帮助找到一种方法使数组中的相关对象动态折叠并显示值，

下面是相关的代码大杂烩，如果您需要更多代码，请随时提问，谢谢您的宝贵时间！

mobx文件：

import {observable, action} from 'mobx';
import {LayoutAnimation} from 'react-native'

class StateStorage {



  @observable list= ['Category','','','']
  @observable selectedMaterial=''
  @observable  materials = [ 
       {

      Specs:[
        textCategory= 'Drain',
        textSpec1='Usabley',
        textSpec2='Healthy',
        textSpec3='Bio'],
        name: 'RYTT',
        price: '$',
        image: require("./Icons/Rain.jpg"),
        spec1:require("./Icons/friendly.png"),
        spec2:require("./Icons/Cutler.png"),
        spec3:require("./Icons/logout.png"),
        category:'',
        icon: '',
      uses:[
              uses1='cecec', 
              uses2='- Cans' ,
              uses3='- Jars',
              uses4='- Signages',

      pros:[
              pros1='Lightweight',
              pros2='Tough',
              pros3='xsxxs',
              pros4='cdccd',
              ],
         cons:[         
              cons1='Inflated',
              cons2='Can be sticky',
              cons3='ejhcejccjhc',
              cons4='dcd',
              cons5='dc'],
        expanded: true,
           specCount:0,
            userCount:0,
             prosCount:0,
              consCount:0,                                                            
                x:0

    },   
    {

      Specs:[
        textCategory= 'Drain',
        textSpec1='Usabley', …

我涉足了大量糟糕的js“解决方案”，以了解如何简单地制作可折叠的嵌套列表。

这是我最终想到的。

我在这里发帖是希望下一个人不必处理那里的所有 rufuse。

否则，请随意添加您自己的！如果您可以管理它，也许是 jquery 免费方法？

• 列表必须采用“正确”格式才能工作

可能重复:
动态添加可折叠元素

我想知道如何动态添加一个可折叠div,这样可以用Jqm listviews完成,调用lisview('refresh')之后

这是测试代码:

http://jsfiddle.net/ca11111/UQWFJ/5/

编辑:在上面,它被附加和渲染,但多次

edit2:好像这样工作？

我有一个包含4个主要项目的菜单,每个项目有3到5个子项目.

<ul id="navigation">
    <li><a>Diagonóstico</a>

    </li>
    <li class="sub"><a href="javascript:void(0);" class="sub_di1"> › Grátis (na compra de qualquer serviço) </a>

    </li>
    <li><a>Hardware</a> 
    </li>
    <li class="sub"><a href="javascript:void(0);" class="sub_ha1"> › Instalação/Configuração de Componentes</a>

请检查完整的代码.

正如您在jsFiddle中看到的,所有菜单项在单击时都会在另一个div中显示一些文本.我把它放在那里以防万一需要进一步的javascript帮助.我想要的是让所有.sub菜单折叠,当我将鼠标悬停在其中一个主菜单上时,它会扩展相应的.sub项目,以便用户可以看到.谢谢!

编辑:

我设法在其中一条评论中得到了一个很好的教程,并提出了这个!

我现在需要的是一种方法来显示相应的.main菜单中的所有.sub菜单,而不是仅显示第一个菜单.

我有一个可折叠的(实体化),其元素是从a创建的for each,但"下拉列表"不起作用.一切都没有在for each工作中.

我该如何解决这个问题？

jobList.html

<template name="jobList">
<ul class="collapsible" data-collapsible="accordion">
    {{#each jobs}}
        <li>
            <div class="collapsible-header">{{title}}</div>
            <div class="collapsible-body"><p>{{description}}</p></div>
        </li>
    {{/each}}
</ul>

jobList.js

Template.jobList.rendered = function () {
    $('.collapsible').collapsible({
        accordion: false
    });
};

Template.jobList.helpers({
    jobs: function() {
        return Jobs.find();
    }
});

该模板jobList位于另一个模板中,该模板无需任何操作{{> jobList}}.

我正在按照这个惊人的指南显示两行文本，并为用户提供“阅读更多”的链接。转换未按预期工作。有人可以指出我在这里做错了什么吗？

#module {
  font-size: 1rem;
  line-height: 1.5;
}

#module p.collapse[aria-expanded="false"] {
  display: block;
  height: 3rem !important;
  overflow: hidden;
}

#module p.collapse.show[aria-expanded="false"] {
  height: 3rem !important;
}

#module a.collapsed:after {
  content: '+ Show More';
}

#module a:not(.collapsed):after {
  content: '- Show Less';
}

<div id="module" class="container">
  <h3>Bacon Ipsum</h3>
  <p class="collapse" id="collapseExample" aria-expanded="false">
    Bacon ipsum dolor amet doner picanha tri-tip biltong leberkas salami meatball tongue filet mignon landjaeger tail. Kielbasa salami tenderloin picanha spare ribs, beef ribs strip steak jerky …

我有一个列表框,其中有多个列表项.我希望实现类似于单击列表项的内容,它将折叠并显示所单击项的摘要:

我已经在网上搜索了很长一段时间,但没有得到任何好的解决方案.我是Win32的新手.有关如何处理此问题的任何建议,我应该使用哪种控件.任何帮助将不胜感激.

我在 R 中创建了以下应用程序模板：

 library(shiny)
 library(shinyjs)

 ui <- fluidPage(
 useShinyjs(),
 navbarPage("",actionButton("toggleSidebar", "toggle", icon = 
 icon("database")),
          tabPanel("tab",
                  div( id ="Sidebar",sidebarPanel(
                  )),mainPanel() ))))


   server <-function(input, output, session) {
   observeEvent(input$toggleSidebar, {
   shinyjs::toggle(id = "Sidebar")
  }) }


 shinyApp(ui, server)

该应用程序将在侧边栏中创建一个切换按钮。该按钮应该出现在导航栏中，而不是在侧边栏上方。实际的切换按钮出现在单词选项卡旁边的上方。然而，它是不可见的。