标签: collapse

我想以早于768px的分辨率折叠我的导航栏,例如992px,我该怎么做？谢谢!(我知道我可以在引导页面上自定义它,但我不想用新的bootstrap.css文件重新启动我的项目)

实现折叠功能时出现此错误:

错误:模板解析错误:无法绑定到'target',因为它不是'div'的已知属性

app.component.html:

<div *ngFor = "let ele of elements; let RowIndex = index">
    {{ele.name}} 
    <button data-toggle="collapse" 
            data-target="#demo{{RowIndex}}">Toggle
    </button>
    <div id="demo{{RowIndex}}" class="collapse">Lorem Ipsum</div>

</div>

但如果我只是使用data-target="#demo",那就行得很好.但是,当我绑定{{RowIndex}}比它显示错误.

我总是遇到同样的问题,当我有2个带边框的相邻元素时,边框会被合并.对于表格,我们有border-collapse属性来解决这个问题.

我已经尝试从其中一个边缘省略边框,但这仅适用于中间的元素,第一个和最后一个元素将错过边框.

例如,有人知道列表元素的解决方案吗？

这是关于Bootstrap 3.0.我希望图标/ glyphicon在崩溃时更改.即,从封闭的文件夹到打开的文件夹.

我已经进行了广泛的搜索,并且在这里阅读了线程,但无济于事.这个帖子很接近,基本上就是我想要的.如何在Bootstrap 3中使其工作？

缩小CSS中的利润率:http://www.w3.org/TR/CSS21/box.html#collapsing-margins

我理解该功能的目的,但我正在尝试做布局,我无法弄清楚如何关闭它.

CSS教程中通常解释的方法是:

1. 添加边框
2. 添加填充

当您使用背景图像和固定填充处理像素完美布局时,所有这些都会产生明显的副作用.

有没有办法简单地禁用折叠而不必将额外的像素推入布局？我必须在视觉上影响文档以改变这样的行为,这对我没有任何意义.

我正在寻找适当的,简单的小代码来执行以下操作:

• 单击Element with Class应用于它.

• DIV.CLASS - 扩展并显示隐藏的内容.(slideDown - Toggle)

• DIV.CLASS - 崩溃并隐藏之前显示的内容.(slideUp - Toggle)

我在这里创建了一个jsFiddle:http://jsfiddle.net/Q4PUw/1/

因此,为了模糊和简单,我需要知道如果同一页面上的元素应用了CLASS,如何使DIV CLASS变得隐藏和可见,其中将激活和停用HIDDEN和/或VISIBLE HTML内容.我需要它默认隐藏.

我看过整个互联网,只发现了非常复杂的脚本,但并不简单.我找到了简单的手风琴......但是那些从未关闭的人,他们只是打开另一个.

谢谢大家的帮助,我希望我能够为很多其他人回答同样的问题......

注意:我知道很少的JavaScript甚至是jQuery.

我正在尝试使用Bootstrap创建可折叠组件.我的代码是这样的

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
      Collapsible Group Item #1
    </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit
      </div>
    </div>
  </div>
</div>

单击"可折叠组项目#1"时,应该折叠"panel-body"类中的项目,但不会产生单击效果.我直接从Bootstrap文档中复制了这段代码,但它仍无法正常工作.任何人都可以找出问题所在？

我们的内部git-lab wiki与Markdown合作.我做了几篇文章的摘要,并希望在我们的wiki中发布它们,这样如果我点击标题,它应该展开,文本应该变得可见,基本上就像在这个例子中

Markdown有这种扩展/折叠/折叠功能吗？

如果我有自举崩溃,我怎么能从点击事件中确定崩溃是打开还是关闭？

这是我的点击事件或者可能有更好的方法来使用点击事件？

$(document).on("click", "a.register-student-link", function() {
    // do some stuff to check if opening or closing
}

<div>
  <a id=@space.EventId class="register-student-link" data-toggle="collapse" href=@spaceIdWith aria-expanded="false" aria-controls="collapseExample">
                                                    Register Student
                                                </a>
</div>

我试图找出一种使用角度js进行展开和折叠的方法.如果不操纵控制器中的dom对象(这不是角度方式),我无法找到一种优雅的方法.目前我有一个很好的方法来进行一层扩展和折叠.然而,当我开始嵌套时,事情变得复杂并且不能按照我想要的方式工作(当它们不应该扩展和折叠多个区域时).我不知道如何通过ng-click发送唯一标识符来扩展/折叠正确的内容.我应该提到这些项目都在ng-repeat中,所以我必须自定义发送的参数.

我能够使用这个jsfiddle来帮助我进行一层扩展和折叠工作.然而,这是一种切换方式,我希望用户能够在扩展其他内容时保持扩展.所以我要做的就是使用一个数组,每次点击某个东西时,点击的项目的索引就会被添加到数组中并且类会被展开.当用户再次单击时,索引已从阵列中删除,并且该区域已折叠.

我发现你能做到的另一种方法是使用指令.但我真的找不到任何一个例子来包围指令如何工作.在编写指令时,我不确定如何开始.

我目前的设置如下:

function Dexspander($scope) {
    $scope.ExpandArray = [];

    //Push or pop necessary elements for tracking
    $scope.DespopulatArray = function (identifier, element) {
    if (_.indexOf($scope.ExpandArray, identifier + element) != -1) {
            $scope.ExpandArray.splice(_.indexOf($scope.ExpandArray, identifier + element), 1);
        } else {
            $scope.ExpandArray.push(identifier + element);
        }
    }

    //Change class of necessary elements
    $scope.Dexspand = function (identifier, element) {
        if (_.indexOf($scope.ExpandArray, identifier + element) != -1) {
            return "expand";
        } else {
            return "collapse";
        }
    }
}

<div class="user-header" ng-repeat="user in users"> …