jquery 折叠式在Bootstrap 4折叠中不起作用

eoxn13cs 于 2022-12-03 发布在 jQuery

关注(0)|答案(5)|浏览(215)

https://fiddle.jshell.net/8v72rtxb/
我有下面的代码。

<div class="menu-horizontal container">
    <div class="row menu-container" id="menu">
      <div class="col-md-3 menu-item">
        <a data-toggle="collapse" class="collapsed collapse-toggle" data-parent="#menu" href="#studies-collapse" aria-expanded="false" aria-controls="collapseExample">
          Studies
        </a>
        <div class="collapse" id="studies-collapse">
          <div class="container">
            <div class="row">
              Something...
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-3 menu-item">
        <a data-toggle="collapse" class="collapsed collapse-toggle" data-parent="#menu" href="#research-collapse" aria-expanded="false" aria-controls="collapseExample">
          Research
        </a>
        <div class="collapse" id="research-collapse">
          <div class="container">
            <div class="row">
              Something...
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

我不知道为什么data-parent不起作用。展开一个collapse div并不能关闭另一个collapse div。我试着从bootstrap的例子中复制代码，但它仍然不起作用。同样在我的项目中，我在bootstrap.min.js之前包含了jquery.js。我检查了一些其他的问题，他们说bootstrap.min.js可能被包含了两次。但应该是这样吗？
感谢阅读！

jquery

来源：https://stackoverflow.com/questions/42413244/accordion-doesnt-work-in-bootstrap-4-collapse

5条答案

按热度按时间

dm7nw8vv1#

我想出了一个解决办法。即使不使用data-parent属性。https://fiddle.jshell.net/zyd1vL4o/

$(document).ready(function(){
    $('.collapse').on('show.bs.collapse', function (e) {
        $('.collapse').collapse("hide")
    })
})

赞(0）回复(0）举报 2022-12-03

9jyewag02#

一旦通过此jsfiddle
这是html代码

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Studies
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse " role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        <div id="studies-collapse">
          <div class="container">
            <div class="row">
              <div class="col-md-3">
                <a href="" class="menu-subitem">
                    Study Guides
                </a>
                <a href="" class="menu-subitem">
                    Counselling and Instructions
                </a>
                <a href="" class="menu-subitem">
                    Student Laboratory
                </a>
                <a href="" class="menu-subitem">
                    Student Exchange
                </a>
              </div>
              <div class="col-md-3">
                <a href="" class="menu-subitem">
                    Post‐graduate studies
                </a>
                <a href="" class="menu-subitem">
                    Theses
                </a>
                <a href="" class="menu-subitem">
                    Exams
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Research
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        <div  id="research-collapse">
          <div class="container">
            <div class="row">
              <div class="col-md-3">
                <a href="" class="menu-subitem">
                    Study Guides
                </a>
                <a href="" class="menu-subitem">
                    Counselling and Instructions
                </a>
                <a href="" class="menu-subitem">
                    Student Laboratory
                </a>
                <a href="" class="menu-subitem">
                    Student Exchange
                </a>
              </div>
              <div class="col-md-3">
                <a href="" class="menu-subitem">
                    Post‐graduate studies
                </a>
                <a href="" class="menu-subitem">
                    Theses
                </a>
                <a href="" class="menu-subitem">
                    Exams
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2022-12-03

jdgnovmf3#

用途：

<div class="menu-horizontal container">
    <div class="row menu-container" id="menu">
        <div class="col-md-3 menu-item">
            <a data-toggle="collapse" class="collapsed" data-target="#studies-collapse" href="#studies-collapse" aria-expanded="false" aria-controls="studies-collapse">
                Studies
            </a>
            <div class="collapse" id="studies-collapse" data-parent="#menu">
                <div class="container">
                    <div class="row">
                        Something...
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 menu-item">
            <a data-toggle="collapse" class="collapsed" data-target="#research-collapse" href="#research-collapse" aria-expanded="false" aria-controls="research-collapse">
                Research
            </a>
            <div class="collapse" id="research-collapse" data-parent="#menu">
                <div class="container">
                    <div class="row">
                        Something...
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

赞(0）回复(0）举报 2022-12-03

yruzcnhs4#

import 'bootstrap/js/dist/collapse';

将其包含在您的文件中，折叠应该会起作用。

赞(0）回复(0）举报 2022-12-03

vmjh9lq95#

如果它没有关闭，那么你可能没有正确地链接到你的引导js。你不需要添加任何额外的东西。检查以下js文件：

bootstrap.min.js
bootstrap.bundle.min.js

如果你正在创建一个引导主题，那么在函数中执行以下操作：
wp_register_script( 'write your theme name here', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array( 'jquery' ) );

赞(0）回复(0）举报 2022-12-03

我来回答

jquery 折叠式在Bootstrap 4折叠中不起作用

5条答案

相关问题

热门标签

最新问答