jquery-ui 和 bootstrap offcanvas 的问题答案

【问题标题】：Problem with jquery-ui and bootstrap offcanvasjquery-ui 和 bootstrap offcanvas 的问题
【发布时间】：2021-07-03 21:59:01
【问题描述】：

我正在尽最大努力弄清楚，但我用 bootsrap 制作的导航栏“我认为”与我的 jQuery-ui 不对应。我不明白为什么。如果有人遇到问题，您将从 Doge 神那里得到教条。干杯家伙这里是代码： HTML

        <nav class="navbar navbar-expand-md navbar-light bg-light" >
          <div class="container" >
            <a href="#" class="navbar-brand">
              <button
              class="navbar-toggler"
              type="button"
              data-bs-toggle="offcanvas"
              data-bs-target="#toggleMobileMenu"
              aria-controls="toggleMobileMenu"
              aria-label="Toggle navigation"
              id="slidebutton"
              >
              <span class="navbar-toggler-icon"></span>
            </button>
            <div
            class="collapse navbar-collapse offcanvas-collapse"
            id="toggleMobileMenu" id="navslide">
              <ul class="navbar-nav ms-auto">
                <li ><a class="nav-link" href="">...</a></li>
                <li ><a class="nav-link" href="">...</a></li>
                <li ><a class="nav-link" href="">...</a></li>
          </ul>
        </div>
      </div>
      </nav>
    </div>

jquery-ui:

$('#slidebutton').click(function(){
    $('#navslide').toggle('slide');
})

【问题讨论】：

试试这个它可能对你有用$('#slidebutton').click(function(){ $('#navslide').classList.toggle('open') })
刚试过。我认为引导程序和 jquery-ui 相互冲突可能存在问题。但我不知道如何解决它。为帮助欢呼，但事实并非如此。
您有一个具有 2 个 ID 属性的 HTML 元素：<div class="collapse navbar-collapse offcanvas-collapse" id="toggleMobileMenu" id="navslide"> 这是无效的。
感谢您的帮助，我现在有点笨：D.

标签： javascript jquery jquery-ui bootstrap-5

【解决方案1】：

问题与 HTML ID 属性有关，在以下元素中，它有两个：

<div class="collapse navbar-collapse offcanvas-collapse" id="toggleMobileMenu" id="navslide">

如果正确，slide 将按预期工作。

$(function() {
  $('#slidebutton').click(function() {
    $('#toggleMobileMenu').toggle('slide', {}, 500);
  });
});

<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">

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <div class="container">
    <a href="#" class="navbar-brand">
      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#toggleMobileMenu" aria-controls="toggleMobileMenu" aria-label="Toggle navigation" id="slidebutton"><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse offcanvas-collapse" id="toggleMobileMenu">
        <ul class="navbar-nav ms-auto">
          <li><a class="nav-link" href="">Item 1</a></li>
          <li><a class="nav-link" href="">Item 2</a></li>
          <li><a class="nav-link" href="">Item 3</a></li>
        </ul>
      </div>
  </div>
</nav>
</div>

【讨论】：

非常感谢