Question

我正在尝试使堆叠式烘烤吐司正常工作，但是关闭按钮不起作用。我可以关闭最近的吐司，但是不能关闭。

我尝试将事件侦听器直接添加到关闭按钮，但是似乎该侦听器不会触发。

document.getElementById('activate').addEventListener('click', () => {
  createToast('hello', 'a', 'b');
});

function createToast(title, smallText, text) {
  let id = new Date().getTime();
  let html = `<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false" id=${id}>
                <div class="toast-header">
                    <svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg"
                    preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
                    <rect fill="#007aff" width="100%" height="100%" /></svg>
                    <strong class="mr-auto">${title}</strong>
                    <small>${smallText}</small>
                    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="toast-body">
                    ${text}
                </div>
            </div>`;

  document.getElementById('toast-container').innerHTML += html;
  $(`#${id}`).toast('show');
}

<html>

<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>

<body>
  <div id="toast-container"></div>
  <button id="activate">Go</button>
</body>

</html>

此代码可以复制，粘贴和运行。

Answer 1

使用toast('hide')

document.getElementById('activate').addEventListener('click', () => {
            createToast('hello', 'a', 'b');
        });

        function createToast(title, smallText, text) {
            let id = new Date().getTime();
            let html = `<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false" id=${id}>
                <div class="toast-header">
                    <svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg"
                    preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
                    <rect fill="#007aff" width="100%" height="100%" /></svg>
                    <strong class="mr-auto">${title}</strong>
                    <small>${smallText}</small>
                    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="toast-body">
                    ${text}
                </div>
            </div>`;

            document.getElementById('toast-container').innerHTML += html;
            $(`#${id}`).toast('show');
        }
        $('body').on('click','.close',function(){
          $(this).closest('.toast').toast('hide')
        })

<html>
    <head>
            <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
            <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </head>

    <body>
        <div id = "toast-container"></div>
        <button id = "activate">Go</button>
    </body>

</html>

如何消除bootstrap中的堆叠吐司？

1 个答案: