主页 / coding / 问题 / 76936457
Accepted
BobDev
Asked: 2023-08-20 02:08:57 +0800 CST

自动显示/隐藏 jquery 中的项目

  • 772

我是 jQuery 的初学者。

我想以这样的方式修改引导组件，使字段在一段时间内在循环中一个接一个地出现。当任何元素上触发默认的“点击”事件（引导崩溃）时，时间将被重置，并且循环将从该元素开始迭代。我希望它在 div 中不断循环，直到访问者离开页面。如何达到这样的效果呢？

这是我想要执行此操作的引导组件的示例：

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExampleOne" role="button" aria-expanded="false" aria-controls="collapseExampleOne">
    Link with href
  </a>
  
</p>
<div class="collapse" id="collapseExampleOne">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExampleTwo" role="button" aria-expanded="false" aria-controls="collapseExampleTwo">
    Link with href
  </a>
  
</p>
<div class="collapse" id="collapseExampleTwo">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

我需要一步一步的帮助来实现这一目标。我是 stackoverflow 的新手，但我学得很快，所以请耐心等待:)

任何帮助深表感谢。

jquery

1 个回答

  1. Best Answer

    您可以添加以下三行 JS 代码，以一次只允许展开一个可折叠项：

    $("a[data-toggle]").click(function () {
    $(".collapse").not($(this).attr("href")).collapse("hide");
});
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExampleOne" role="button" aria-expanded="false" aria-controls="collapseExampleOne">
    Link with href
  </a>
  
</p>
<div class="collapse" id="collapseExampleOne">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExampleTwo" role="button" aria-expanded="false" aria-controls="collapseExampleTwo">
    Link with href
  </a>
  
</p>
<div class="collapse" id="collapseExampleTwo">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

    • 0

相关问题