标签: bootstrap-accordion

我想展示这款可折叠手风琴的第一个元素.我在互联网上做了一些研究但是徒劳无功

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne" >
        Aller au dossier personnel d'un agent
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">
      <div class="accordion-inner">
        <form action="goToAgent.do" method="post">
          <p align="center">
            <input type="hidden" value="identite" name="retour">
            <label for="nomPrenom" >
              Entrer le nom complet de l'agent:
            </label>
            <input type="text" name="nomPrenom" class="typeahead" /> <br>
            <input type="submit" value="appliquer" class="btn btn-info" />
        </form>
      </div>
    </div>
  </div>
  <div …

我正在研究这个项目，并尝试在手风琴打开时更改其背景颜色。我喜欢它关闭时的齐平，但不喜欢它打开时的白色背景。

我还试图改变箭头的位置，使它们处于一条直线上。

这是我到目前为止所拥有的：

console.log(1)\n$(".accordion-button").click(function(){\n  console.log(2)\n  var dest = $(this).attr("data-bs-target");\n  $(dest)[0].scrollIntoView();\n});\n.accordion-button:not(.collapsed)::after {\n  background-image: url("data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\' fill=\'%23FEB7EE\'%3e%3cpath fill-rule=\'evenodd\' d=\'M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\'/%3e%3c/svg%3e");\n}

body {\n    background-image: linear-gradient(rgba(143,25,154,1), rgba(200, 5, 158, 0.8));\n    opacity: 1;\n    position: relative;\n    overflow: scroll;\n  }\n\n.accordion-title {\n    font-variant-caps: titling-caps;\n    position: absoulte;\n}\n\n.accordion-button {\n    font-size: 20px;\n    font-family: Red Rose;\n    color: #FEB7EE !important;\n}\n\n.accordion-button:after {\n    background-image: url("data:image/svg+xml,<svg xmlns=\'http://www.w3.org/2000/svg\' …

我创建了带有+和-符号的boostrap 4手风琴菜单。符号在折叠和展开时会发生变化。

我用：after添加符号

但是，我想用按钮而不是'-，+'符号代替它。这样我将有2个按钮，就像“看到更多”，“看到更少”（可以是具有不同文本和背景的同一按钮）一样，并且随着我的点击而变化

我不知道。

我的代码和演示：https : //www.codeply.com/go/sOps2WhtG5

<div class="container">
<div id="accordion" class="accordion">
    <div class="card mb-0">
        <div class="card-header collapsed" data-toggle="collapse" href="#collapseOne">
            <a class="card-title">
                Item 1
            </a>
        </div>
        <div id="collapseOne" class="card-body collapse" data-parent="#accordion" >
            <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
                aliqua put a bird on it squid single-origin coffee nulla assumenda …

我正在尝试在单击事件上使用 stopPropagation 将外部链接添加到引导手风琴标头。

不幸的是，链接不起作用，手风琴的展开/折叠仍然发生。

html:

<ul class="accordion" id="collapse1">
  <li>
    <div class="accordion-button collapsed" href="#one" 
         data-bs-toggle="collapse" data-bs-target="#one" aria-expanded="false">
         Maincategory
         &nbsp;/&nbsp;
         <a href="https://google.com" class="non-collapsing">
           open
         </a>
    </div>
    <ul class="accordion-collapse collapse" id="one" data-bs-parent="#collapse1">
      <li><a href="#">Sub 1</a></li>
      <li><a href="#">Sub 2</a></li>
      <li><a href="#">Sub 3</a></li>
    </ul>
  </li>
</ul>

js:

$('.non-collapsing').on('click', function (e) {
    e.stopPropagation();
});

jsfiddle： https: //jsfiddle.net/ct503zgf/

任何人都可以提示为什么这不起作用吗？

我有一些使用 bootstrap 的可折叠字段，如下所示：

        <div id='toggle'>
            <button type='button' data-toggle='collapse' data-target='#target' id='toggle'>Title</button>
        </div>
        <div id='target' class='collapse'>
            <p class='stuff'>Some Stuff Here</p>
        </div>

这工作正常，但我想展开所有按钮并折叠所有按钮。我认为通过添加另外两个在onClick事件期间调用函数的按钮，我可以使它们展开和折叠。我这样做是使用：

<button type="button" onclick="expand()">Expand All</button>
<button type="button" onclick="collapse()">Collapse All</button>

调用这些函数：

function expand() {
    $('.stuff').slideDown(400);
    $('.collapse').slideDown(400);
}

function collapse() {
    $('.stuff').slideUp(400);
    $('.collapse').slideUp(400);
}

这些都是半功能性的。问题是，一旦使用了全部展开和全部折叠按钮，引导按钮将不再响应。单击全部折叠使切换仅折叠，单击全部展开使切换仅展开。

有没有更好的方法来做到这一点，或者让我的解决方案发挥作用？

我使用 ngx-bootstrap 手风琴来显示博客文章列表。

这是模板：

<accordion id="blog-list">
    <accordion-group *ngFor="let post of posts; let first = first;" [isOpen]="first" id="post-{{post.id}}">
        <!-- Here goes content irrelevant to the question -->
    </accordion-group>
</accordion>

我还使用一些全局配置，一次只打开一个折叠面板。

export function getAccordionConfig(): AccordionConfig {
  return Object.assign(new AccordionConfig(), { closeOthers: true });
}

现在，当帖子更新时，我会在列表中更新它，如下所示：

constructor(private elementRef: ElementRef, private postService: PostService) {
    this.postService.updatedPost.subscribe(val => {
      let i = this.posts.findIndex(post => post.id === val.id);
      this.posts[i] = val;
      let element = elementRef.nativeElement.querySelector('#post-' + val.id);
      element.setAttribute('isOpen', true); // <- this does not work
      element.scrollIntoView(true);
    }); …

我正在接近Elm,我需要创建一个包含一些可折叠数据的页面.由于我目前正在使用Bootstrap,因此Accordion组件似乎是最适合使用的组件.

这是我的相关虚拟代码:

view : Model -> Html Msg
view model =
    div []
        [ basicAccordion model.accordionState
            "Dummy1"
            (div []
                [ text "Dummy Title"
                , Button.button [ Button.secondary ] [ text "Hello World" ]
                ]
            )
            Nothing
        , structuredAccordion model.accordionState
            "Dummy2"
            ([ Card.titleH4 [] [ text "Another trial" ]
             , Card.text [] [ text "Bye" ]
             ]
            )
            (Just ("id_dummy2"))
        ]

basicAccordion : Accordion.State -> String -> Html Msg -> Maybe String -> Maybe Bool -> Html Msg
basicAccordion state title …

我在手风琴中使用Bootstrap 4.0的折叠组件，类似于他们在docs上的组件。

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla …

我正在关注有关引导手风琴的视频教程和演示，它的工作正常，但有一个问题，我必须单击以打开手风琴的每一行，然后再次单击自身以关闭我想在单击另一个第一次关闭时切换，依此类推 首先这里的屏幕截图很容易理解我的意思： http : //www.4shared.com/download/xNSLTB57/accordoineIssue.PNG

现在这里的代码：

<div id="accordion" class="panel-group">
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">
                <a class="collapsed" href="#first" data-toggle="collapse" data-parent="#accordion">First</a>
            </div>
            <div class="panel-collapse collapse" id="first">
                <div class="panel-body">
                    <img src="images/lebowski-1.jpg" alt="1" />
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">
                <a class="collapsed" href="#secound" data-toggle="collapse" data-parent="#accordion">
                    Secound</a>
            </div>
            <div class="panel-collapse collapse" id="secound">
                <div class="panel-body">
                    <img src="images/lebowski-2.jpg" alt="2" />
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">
                <a class="collapsed" href="#third" data-toggle="collapse" data-parent="#accordion">Third</a>
            </div>
            <div class="panel-collapse collapse" …

这是Bootstrap 5 Accordion 文档中的示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well …

我正在使用带有手风琴功能的 Bootstrap 5.1。然而，当页面加载时，V 形符号是颠倒的，只有在单击几次后才会自行恢复正常。

这是代码：

        <div class="accordion" id="accordion">
            <div class="accordion-item">
              <h4 class="accordion-header" id="headingOne">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Current Courses
                </button>
                </h4>
                <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordion">
  <div class="accordion-body">
                    {current_courses}
                        <p class="course"><a class="course-link" href="{current_courses:link_to_course}">{current_courses:title}</a> 
                        {current_courses:hours} CPE Hours {current_courses:course_date}</p>
                    {/current_courses}
                </div><!-- /. accordion-body -->
            </div><!-- /.collapse -->
        </div><!-- /.accordion-item -->

手风琴工作正常，但 V 形首先显示如下：

这是手风琴的 css：

.accordion-button::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23A81912'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 …

我有一个这样写的手风琴

<!DOCTYPE html>
<html>
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    </head>
    <body>
    <div id="editTournamentAccordionWrapper" class="accordion accordion-flush">
        <div class="accordion-item">
            <h2 class="accordion-header" id="editTournamentAccordionHeading">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#editTournamentAccordion" aria-expanded="false" aria-controls="editTournamentAccordion">
                    Card title
                </button>
            </h2>
            <div id="editTournamentAccordion" class="accordion-collapse collapse" aria-labelledby="editTournamentAccordionHeading" data-bs-parent="editTournamentAccordionWrapper">
                <div class="accordion-body">
                    <iframe class="w-100" style="height: 1024px;" src="www.example.com"></iframe>
                </div>
            </div>
        </div>
    </div>
    </body>
</html>

当我第一次单击手风琴标题时，手风琴不会打开并抛出以下异常

未捕获的类型错误：在未实现接口元素的对象上调用了“querySelectorAll”。选择器-engine.js:18:59

知道原因吗？据我所知，这是我必须编写的最少代码才能使错误出现