blocks|key|2922777|text|如果您使用的是引导5，那么您应该使用data-bs-autohide="true"和data-bs-delay="10000"，您错过了bs。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2922778|entityMap^0|I|N|16|L|1W|2|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

<p>if you are using bootstrap 5 then you should use <code>data-bs-autohide=&quot;true&quot;</code> and <code>data-bs-delay=&quot;10000&quot;</code> you missed <code>bs</code></p>


blocks|key|2486942|text|您的代码处理一些更改，|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2486943|引导5不需要jQuery，本机JavaScript库非常容易使用。但是，如果您确实使用了jQuery，那么请记住，文档可能不会向您展示使用jQuery进行某些操作的正确方法。|2486944|以下是一些值得关注的问题：|2486945|1.初始化|2486946|当引导程序5检测到jQuery时，它会在DOMContentLoaded事件上加载jQuery插件。重要的是，这似乎发生在jQuery就绪事件之后。如果页面加载时需要使用引导程序，那么添加一个处理程序，如下所示：|2486947|document.addEventListener("DOMContentReady",+function()+{

+++$("#mytoast").toast();

});|code-block|syntax|javascript|2486948|2.+jQuery插件|2486949|引导程序添加到jQuery中的插件只是引导本机JavaScript方法的包装器。语法是不同的，查看文档可能会误导您如何使用jQuery。|2486950|例如，本机JavaScript显示烤面包的方式：|2486951|let+toast+=+bootstrap.Toast.getOrCreateInstance(myToastEl);
toast.show();+|2486952|然而，如果您使用的是jQuery，这将无法工作，尽管从文档中看可能是这样。|2486953|let+toast+=+$(myToastEl).toast();
toast.show();|2486954|使用jQuery，您需要这样做：|2486955|$(myToastEl).toast("show");|2486956|3.数据属性|2486957|请注意，属性有一个新的前缀：data-bs-<name>，所以如果您使用data-delay而不是正确的data-bs-delay，那么它将不能正常工作。|CODE|2486958|演示片段|2486959|代码片段将这些更改合并到原始代码中，并如预期的那样显示引导带吐司。|2486960|​|2486961|test.onclick+=+function()+{
++$('#companyUpdOK').toast("show");
}

document.addEventListener("DOMContentLoaded",+function()+{
++$('#companyUpdOK').toast();
});|2486962|<button+id="test"+class="btn+btn-primary+m-1">Show+Toast</button>


<div+aria-live="polite"+aria-atomic="true"+class="bg-dark+position-relative+bd-example-toasts">
++<div+class="toast-container+position-absolute+p-3"+id="toastPlacement">

++++<div+class="toast"+id="companyUpdOK"+name="companyUpdOK"+role="alert"+data-bs-delay="2000"+data-bs-autohide="true"+aria-live="assertive"+aria-atomic="true">
++++++<div+class="toast-header">
++++++++<strong+class="me-auto">Bootstrap</strong>
++++++++<small>11+mins+ago</small>
++++++++<button+type="button"+class="btn-close"+data-bs-dismiss="toast"+aria-label="Close"></button>
++++++</div>
++++++<div+class="toast-body">
++++++++Hello,+world!+This+is+a+toast+message.
++++++</div>
++++</div>

++</div>
</div>

<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<link+href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"+rel="stylesheet">

<script+src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.js"></script>|2486963|2486964|entityMap^0|0|B|0|0|0|0|5|0|0|0|0|B|0|0|0|0|0|0|0|0|0|6|0|E|E|10|A|1G|D|0|0|4|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1Q|8|@$9|1R|A|1S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1T|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1U|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1V|8|@$9|1W|A|1X|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|1Y|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|1Z|8|@]|D|@]|E|$Q|R]]|$1|S|3|T|5|6|7|20|8|@$9|21|A|22|B|C]]|D|@]|E|$]]|$1|U|3|V|5|6|7|23|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|24|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|P|7|25|8|@]|D|@]|E|$Q|R]]|$1|10|3|11|5|6|7|26|8|@]|D|@]|E|$]]|$1|12|3|13|5|P|7|27|8|@]|D|@]|E|$Q|R]]|$1|14|3|15|5|6|7|28|8|@]|D|@]|E|$]]|$1|16|3|17|5|P|7|29|8|@]|D|@]|E|$Q|R]]|$1|18|3|19|5|6|7|2A|8|@$9|2B|A|2C|B|C]]|D|@]|E|$]]|$1|1A|3|1B|5|6|7|2D|8|@$9|2E|A|2F|B|1C]|$9|2G|A|2H|B|1C]|$9|2I|A|2J|B|1C]]|D|@]|E|$]]|$1|1D|3|1E|5|6|7|2K|8|@$9|2L|A|2M|B|C]]|D|@]|E|$]]|$1|1F|3|1G|5|6|7|2N|8|@]|D|@]|E|$]]|$1|1H|3|1I|5|6|7|2O|8|@]|D|@]|E|$]]|$1|1J|3|1K|5|P|7|2P|8|@]|D|@]|E|$Q|R]]|$1|1L|3|1M|5|P|7|2Q|8|@]|D|@]|E|$Q|R]]|$1|1N|3|1I|5|6|7|2R|8|@]|D|@]|E|$]]|$1|1O|3|-4|5|6|7|2S|8|@]|D|@]|E|$]]]|1P|$]]

<p><strong>Your code works with some changes</strong></p>
<p>Bootstrap 5 doesn't require jQuery and the native JavaScript library is very easy to use. Yet, if you do use jQuery then keep in mind that the documentation may not show you the right way to do something using jQuery.</p>
<p>Here are a few issues to watch for:</p>
<p><strong>1. Initialization</strong></p>
<p>When Bootstrap 5 detects jQuery it loads jQuery plug-ins on the DOMContentLoaded event. Importantly, this appears to happen AFTER the jQuery ready event.  If you need to do something with Bootstrap when the page loads then add a handler like:</p>
<pre><code>document.addEventListener(&quot;DOMContentReady&quot;, function() {

   $(&quot;#mytoast&quot;).toast();

});
</code></pre>
<p><strong>2. jQuery plug-ins</strong></p>
<p>The plug-ins that Bootstrap adds to jQuery are just wrappers for Bootstrap native JavaScript methods. The syntax is different and looking at the documentation can mislead you about how to do it with jQuery.</p>
<p>For example, the native JavaScript way of showing a Toast:</p>
<pre><code>let toast = bootstrap.Toast.getOrCreateInstance(myToastEl);
toast.show(); 
</code></pre>
<p>Yet, if you are using jQuery this will not work, even though it might seem so from the documentation.</p>
<pre><code>let toast = $(myToastEl).toast();
toast.show();
</code></pre>
<p>With jQuery you instead need to do this:</p>
<pre><code>$(myToastEl).toast(&quot;show&quot;);
</code></pre>
<p><strong>3. Data Attributes</strong></p>
<p>Be aware that attributes have a new prefix: <code>data-bs-&lt;name&gt;</code>   So if you use <code>data-delay</code> rather than the correct <code>data-bs-delay</code> then it will not work correctly.</p>
<p><strong>Demo Snippet</strong></p>
<p>The snippet incorporates these changes into the original code and the Bootstrap toast displays as expected.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>test.onclick = function() {
  $('#companyUpdOK').toast("show");
}

document.addEventListener("DOMContentLoaded", function() {
  $('#companyUpdOK').toast();
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="test" class="btn btn-primary m-1"&gt;Show Toast&lt;/button&gt;


&lt;div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts"&gt;
  &lt;div class="toast-container position-absolute p-3" id="toastPlacement"&gt;

    &lt;div class="toast" id="companyUpdOK" name="companyUpdOK" role="alert" data-bs-delay="2000" data-bs-autohide="true" aria-live="assertive" aria-atomic="true"&gt;
      &lt;div class="toast-header"&gt;
        &lt;strong class="me-auto"&gt;Bootstrap&lt;/strong&gt;
        &lt;small&gt;11 mins ago&lt;/small&gt;
        &lt;button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="toast-body"&gt;
        Hello, world! This is a toast message.
      &lt;/div&gt;
    &lt;/div&gt;

  &lt;/div&gt;
&lt;/div&gt;

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;

&lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"&gt;

&lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>


<p>I am trying to implement Bootstrap 5 toasts in my ASP.NET web application, using the following code...</p>
<p><strong>HTML</strong></p>
<pre><code>                    &lt;div class=&quot;row&quot;&gt;
                        &lt;div class=&quot;toast&quot; id=&quot;companyUpdOK&quot; name=&quot;companyUpdOK&quot; role=&quot;alert&quot; data-delay=&quot;5000&quot; data-autohide=&quot;true&quot; aria-live=&quot;assertive&quot; aria-atomic=&quot;true&quot;&gt;
                            &lt;div class=&quot;toast-header&quot;&gt;
                                &lt;strong class=&quot;me-auto&quot;&gt;Bootstrap&lt;/strong&gt;
                                &lt;small&gt;11 mins ago&lt;/small&gt;
                                &lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;toast&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;toast-body&quot;&gt;
                                Hello, world! This is a toast message.
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
</code></pre>
<p><strong>JavaScript</strong></p>
<pre><code>$('#companyUpdOK').toast();  // code to set up toast
...
$('#companyUpdOK').show();   // and later, the code to display the toast
</code></pre>
<p>So, the toast shows up, but the autohide doesn't work, and the close button doesn't work either.  I have tried every combination I could find, including setting the options when initializing the toast, as in:</p>
<pre><code>$('#companyUpdOK').toast({delay: 5000, autohide: true});
</code></pre>
<p>None of these work.  What am I doing wrong?</p>


Can't get Bootstrap toast to close or autohide to work

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我试图在我的ASP.NET web应用程序中实现引导5祝酒词，使用以下代码.                    <div class="row">                        <div class="toast" id="companyUpdOK" name="companyUpdOK" role...

问无法让靴带吐司关闭或自动隐藏工作
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法让靴带吐司关闭或自动隐藏工作EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法让靴带吐司关闭或自动隐藏工作
EN