我想动态创建一个带有jQuery的“下拉菜单”对象。

huangapple
go评论37阅读模式
英文:

I want to dynamically create a "dropdown" object. with jquery

问题

I want to dynamically create a "dropdown" object.
So I changed the element of "dropdown" using "jQuery".
It's a "dropdown" with a "hover" function, but when you click "hover" on the existing "dropdown" object, the focus of the "dropdown" object does not go out and "submenu" is visible.

But if I add the same html to the dom using "jQuery"
When I click "hover", the focus goes out and I throw it away.

It seems that "css" is not applied...

can i get help?

thank you

    <html lang="ko">
    
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>test</title>
    
    </head>
    
    <body class="hold-transition sidebar-mini layout-fixed" data-panel-auto-height-mode="height">
      <div class="wrapper">
    
        <!-- Navbar -->
        <nav class="main-header navbar navbar-expand navbar-white navbar-light">
          <!-- Left navbar links -->
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
            </li>
            <li class="nav-item dropdown">
              <a id="dropdownSubMenu1" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle">Dropdown</a>
              <ul aria-labelledby="dropdownSubMenu1" class="dropdown-menu border-0 shadow">
                <li><a href="#" class="dropdown-item">Some action </a></li>
                <li><a href="#" class="dropdown-item">Some other action</a></li>
    
                <li class="dropdown-divider"></li>
    
                <!-- Level two dropdown-->
                <li class="dropdown-submenu dropdown-hover">
                  <a id="dropdownSubMenu2" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-item dropdown-toggle">Hover for action</a>
                  <ul aria-labelledby="dropdownSubMenu2" class="dropdown-menu border-0 shadow">
                    <li>
                      <a tabindex="-1" href="#" class="dropdown-item">level 2</a>
                    </li>
    
                    <!-- Level three dropdown-->
                    <li class="dropdown-submenu">
                      <a id="dropdownSubMenu3" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-item dropdown-toggle">level 2</a>
                      <ul aria-labelledby="dropdownSubMenu3" class="dropdown-menu border-0 shadow">
                        <li><a href="#" class="dropdown-item">3rd level</a></li>
                        <li><a href="#" class="dropdown-item">3rd level</a></li>
                      </ul>
                    </li>
                    <!-- End Level three -->
    
                    <li><a href="#" class="dropdown-item">level 2</a></li>
                    <li><a href="#" class="dropdown-item">level 2</a></li>
                  </ul>
                </li>
                <!-- End Level two -->
              </ul>
            </li>
            <div id="topScreenList">
            </div>
          </ul>
          <!-- Right navbar links -->
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" data-widget="fullscreen" href="#" role="button">
                <i class="fas fa-expand-arrows-alt"></i>
              </a>
            </li>
          </ul>
        </nav>
        <!-- /.navbar -->
    
        <!-- Main Sidebar Container -->
        <aside class="main-sidebar sidebar-dark-primary elevation-4">
          <!-- Brand Logo -->
          <a href="/" class="brand-link">
            <img src="" alt="Logo" class="brand-image img-circle elevation-3">
            <span class="brand-text font-weight-light">?</span>
          </a>
    
          <!-- Sidebar -->
          <div class="sidebar">
            <!-- Sidebar user panel (optional) -->
            <div class="user-panel mt-3 pb-3 mb-3 d-flex">
              <div class="image">
                <img src="" class="img-circle elevation-2" alt="User Image">
              </div>
              <div class="info">
                <a href="#" class="d-block">?</a>
              </div>
            </div>
    
            <!-- SidebarSearch Form -->
            <div class="form-inline">
              <div class="input-group" data-widget="sidebar-search">
                <input class="form-control form-control-sidebar" type="search" placeholder="메뉴검색" aria-label="Search">
                <div class="input-group-append">
                  <button class="btn btn-sidebar">
                    <i class="fas fa-search fa-fw"></i>
                  </button>
                </div>
              </div>
            </div>
    
            <!-- Sidebar Menu -->
            <nav class="mt-2">
              <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"&

<details>
<summary>英文:</summary>

I want to dynamically create a &quot;dropdown&quot; object.
So I changed the element of &quot;dropdown&quot; using &quot;jQuery&quot;.
It&#39;s a &quot;dropdown&quot; with a &quot;hover&quot; function, but when you click &quot;hover&quot; on the existing &quot;dropdown&quot; object, the focus of the &quot;dropdown&quot; object does not go out and &quot;submenu&quot; is visible.

But if I add the same html to the dom using &quot;jQuery&quot;
When I click &quot;hover&quot;, the focus goes out and I throw it away.

It seems that &quot;css&quot; is not applied...

can i get help?

thank you

`
    &lt;html lang=&quot;ko&quot;&gt;
    
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
      &lt;title&gt;test&lt;/title&gt;
    
    &lt;/head&gt;
    
    &lt;body class=&quot;hold-transition sidebar-mini layout-fixed&quot; data-panel-auto-height-mode=&quot;height&quot;&gt;
      &lt;div class=&quot;wrapper&quot;&gt;
    
        &lt;!-- Navbar --&gt;
        &lt;nav class=&quot;main-header navbar navbar-expand navbar-white navbar-light&quot;&gt;
          &lt;!-- Left navbar links --&gt;
          &lt;ul class=&quot;navbar-nav&quot;&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
              &lt;a class=&quot;nav-link&quot; data-widget=&quot;pushmenu&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;&lt;i class=&quot;fas fa-bars&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;nav-item dropdown&quot;&gt;
              &lt;a id=&quot;dropdownSubMenu1&quot; href=&quot;#&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; class=&quot;nav-link dropdown-toggle&quot;&gt;Dropdown&lt;/a&gt;
              &lt;ul aria-labelledby=&quot;dropdownSubMenu1&quot; class=&quot;dropdown-menu border-0 shadow&quot;&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Some action &lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Some other action&lt;/a&gt;&lt;/li&gt;
    
                &lt;li class=&quot;dropdown-divider&quot;&gt;&lt;/li&gt;
    
                &lt;!-- Level two dropdown--&gt;
                &lt;li class=&quot;dropdown-submenu dropdown-hover&quot;&gt;
                  &lt;a id=&quot;dropdownSubMenu2&quot; href=&quot;#&quot; role=&quot;button&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; class=&quot;dropdown-item dropdown-toggle&quot;&gt;Hover for action&lt;/a&gt;
                  &lt;ul aria-labelledby=&quot;dropdownSubMenu2&quot; class=&quot;dropdown-menu border-0 shadow&quot;&gt;
                    &lt;li&gt;
                      &lt;a tabindex=&quot;-1&quot; href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;level 2&lt;/a&gt;
                    &lt;/li&gt;
    
                    &lt;!-- Level three dropdown--&gt;
                    &lt;li class=&quot;dropdown-submenu&quot;&gt;
                      &lt;a id=&quot;dropdownSubMenu3&quot; href=&quot;#&quot; role=&quot;button&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; class=&quot;dropdown-item dropdown-toggle&quot;&gt;level 2&lt;/a&gt;
                      &lt;ul aria-labelledby=&quot;dropdownSubMenu3&quot; class=&quot;dropdown-menu border-0 shadow&quot;&gt;
                        &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;3rd level&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;3rd level&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;!-- End Level three --&gt;
    
                    &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;level 2&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;level 2&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
                &lt;!-- End Level two --&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;div id=&quot;topScreenList&quot;&gt;
            &lt;/div&gt;
          &lt;/ul&gt;
          &lt;!-- Right navbar links --&gt;
          &lt;ul class=&quot;navbar-nav ml-auto&quot;&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
              &lt;a class=&quot;nav-link&quot; data-widget=&quot;fullscreen&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;
                &lt;i class=&quot;fas fa-expand-arrows-alt&quot;&gt;&lt;/i&gt;
              &lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
        &lt;!-- /.navbar --&gt;
    
        &lt;!-- Main Sidebar Container --&gt;
        &lt;aside class=&quot;main-sidebar sidebar-dark-primary elevation-4&quot;&gt;
          &lt;!-- Brand Logo --&gt;
          &lt;a href=&quot;/&quot; class=&quot;brand-link&quot;&gt;
            &lt;img src=&quot;&quot; alt=&quot;Logo&quot; class=&quot;brand-image img-circle elevation-3&quot; style=&quot;opacity: .8&quot;&gt;
            &lt;span class=&quot;brand-text font-weight-light&quot;&gt;?&lt;/span&gt;
          &lt;/a&gt;
    
          &lt;!-- Sidebar --&gt;
          &lt;div class=&quot;sidebar&quot;&gt;
            &lt;!-- Sidebar user panel (optional) --&gt;
            &lt;div class=&quot;user-panel mt-3 pb-3 mb-3 d-flex&quot;&gt;
              &lt;div class=&quot;image&quot;&gt;
                &lt;img src=&quot;&quot; class=&quot;img-circle elevation-2&quot; alt=&quot;User Image&quot;&gt;
              &lt;/div&gt;
              &lt;div class=&quot;info&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;d-block&quot;&gt;?&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
    
            &lt;!-- SidebarSearch Form --&gt;
            &lt;div class=&quot;form-inline&quot;&gt;
              &lt;div class=&quot;input-group&quot; data-widget=&quot;sidebar-search&quot;&gt;
                &lt;input class=&quot;form-control form-control-sidebar&quot; type=&quot;search&quot; placeholder=&quot;메뉴검색&quot; aria-label=&quot;Search&quot;&gt;
                &lt;div class=&quot;input-group-append&quot;&gt;
                  &lt;button class=&quot;btn btn-sidebar&quot;&gt;
                    &lt;i class=&quot;fas fa-search fa-fw&quot;&gt;&lt;/i&gt;
                  &lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
    
            &lt;!-- Sidebar Menu --&gt;
            &lt;nav class=&quot;mt-2&quot;&gt;
              &lt;ul class=&quot;nav nav-pills nav-sidebar flex-column&quot; data-widget=&quot;treeview&quot; role=&quot;menu&quot; data-accordion=&quot;false&quot;&gt;
              &lt;/ul&gt;
            &lt;/nav&gt;
            &lt;!-- /.sidebar-menu --&gt;
          &lt;/div&gt;
          &lt;!-- /.sidebar --&gt;
        &lt;/aside&gt;
    
        &lt;!-- Content Wrapper. Contains page content --&gt;
        &lt;div class=&quot;content-wrapper iframe-mode&quot; data-widget=&quot;iframe&quot; data-loading-screen=&quot;750&quot;&gt;
          &lt;div class=&quot;nav navbar navbar-expand navbar-white navbar-light border-bottom p-0&quot;&gt;
            &lt;div class=&quot;nav-item dropdown&quot;&gt;
              &lt;a class=&quot;nav-link bg-danger dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; href=&quot;#&quot; role=&quot;button&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;close&lt;/a&gt;
              &lt;div class=&quot;dropdown-menu mt-0&quot;&gt;
                &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot; data-widget=&quot;iframe-close&quot; data-type=&quot;all&quot;&gt;all&lt;/a&gt;
                &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot; data-widget=&quot;iframe-close&quot; data-type=&quot;all-other&quot;&gt;other&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;a class=&quot;nav-link bg-light&quot; href=&quot;#&quot; data-widget=&quot;iframe-scrollleft&quot;&gt;&lt;i class=&quot;fas fa-angle-double-left&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;ul class=&quot;navbar-nav overflow-hidden&quot; role=&quot;tablist&quot;&gt;&lt;/ul&gt;
            &lt;a class=&quot;nav-link bg-light&quot; href=&quot;#&quot; data-widget=&quot;iframe-scrollright&quot;&gt;&lt;i class=&quot;fas fa-angle-double-right&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a class=&quot;nav-link bg-light&quot; href=&quot;#&quot; data-widget=&quot;iframe-fullscreen&quot;&gt;&lt;i class=&quot;fas fa-expand&quot;&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;tab-empty&quot;&gt;
              &lt;h2 class=&quot;display-4&quot;&gt;No tab selected!&lt;/h2&gt;
            &lt;/div&gt;
            &lt;div class=&quot;tab-loading&quot;&gt;
              &lt;div&gt;
                &lt;h2 class=&quot;display-4&quot;&gt;Tab is loading &lt;i class=&quot;fa fa-sync fa-spin&quot;&gt;&lt;/i&gt;&lt;/h2&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Control Sidebar --&gt;
        &lt;aside class=&quot;control-sidebar control-sidebar-dark&quot;&gt;
          &lt;!-- Control sidebar content goes here --&gt;
        &lt;/aside&gt;
        &lt;!-- /.control-sidebar --&gt;
      &lt;/div&gt;
      &lt;!-- ./wrapper --&gt;
      const test = `
            
              &lt;li class=&quot;nav-item dropdown&quot;&gt;
                &lt;a id=&quot;dropdownSubMenu1&quot; href=&quot;#&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; class=&quot;nav-link dropdown-toggle&quot;&gt;Dropdown&lt;/a&gt;
                &lt;ul aria-labelledby=&quot;dropdownSubMenu1&quot; class=&quot;dropdown-menu border-0 shadow&quot;&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Some action &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Some other action&lt;/a&gt;&lt;/li&gt;
    
                  &lt;li class=&quot;dropdown-divider&quot;&gt;&lt;/li&gt;
    
                  &lt;!-- Level two dropdown--&gt;
                  &lt;li class=&quot;dropdown-submenu dropdown-hover&quot;&gt;
                    &lt;a id=&quot;dropdownSubMenu2&quot; href=&quot;#&quot; role=&quot;button&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; class=&quot;dropdown-item dropdown-toggle&quot;&gt;Hover for action&lt;/a&gt;
                    &lt;ul aria-labelledby=&quot;dropdownSubMenu2&quot; class=&quot;dropdown-menu border-0 shadow&quot;&gt;
                      &lt;li&gt;
                        &lt;a tabindex=&quot;-1&quot; href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;level 2&lt;/a&gt;
                      &lt;/li&gt;
    
                      &lt;!-- Level three dropdown--&gt;
                      &lt;li class=&quot;dropdown-submenu&quot;&gt;
                        &lt;a id=&quot;dropdownSubMenu3&quot; href=&quot;#&quot; role=&quot;button&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; class=&quot;dropdown-item dropdown-toggle&quot;&gt;level 2&lt;/a&gt;
                        &lt;ul aria-labelledby=&quot;dropdownSubMenu3&quot; class=&quot;dropdown-menu border-0 shadow&quot;&gt;
                          &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;3rd level&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;3rd level&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;!-- End Level three --&gt;
    
                      &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;level 2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;level 2&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;!-- End Level two --&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
      `;
      $(&quot;#topScreenList&quot;).before(test);
      &lt;/script&gt;
    &lt;/body&gt;
    
    &lt;/html&gt;
`

jsfiddle
https://jsfiddle.net/pyusLbgz/1/

</details>


# 答案1
**得分**: 1

以下是翻译好的部分：

问题是bootstrap的javascript事件问题。
由于事件未应用于动态创建的对象，它们必须使用javascript进行初始化。

// 下拉菜单切换函数
function toggleDropdown($toggle) {
  $toggle.next(".dropdown-menu").toggleClass("show");
}

// 当下拉菜单被点击时
$(".dropdown-toggle").on("click", function (e) {
  e.stopPropagation(); // 阻止点击事件的传播
  toggleDropdown($(this));
});

// 当整个文档被点击时关闭所有下拉菜单
$(document).on("click", function () {
  $(".dropdown-menu").removeClass("show");
});

<details>
<summary>英文:</summary>

The problem was bootstrap&#39;s javascript event problem.
Since events are not applied to dynamically created objects, they must be initialized with javascript.

    // dropdown menu toggle function
    function toggleDropdown($toggle) {
      $toggle.next(&quot;.dropdown-menu&quot;).toggleClass(&quot;show&quot;);
    }

    // when the dropdown menu is clicked
    $(&quot;.dropdown-toggle&quot;).on(&quot;click&quot;, function (e) {
      e.stopPropagation(); // stop propagating click events
      toggleDropdown($(this));
    });

    // Close all drop-down menus when the entire document is clicked
    $(document).on(&quot;click&quot;, function () {
      $(&quot;.dropdown-menu&quot;).removeClass(&quot;show&quot;);
    });

</details>

huangapple
  • 本文由 发表于 2023年5月11日 17:07:49
  • 转载请务必保留本文链接：https://go.coder-hub.com/76225919.html
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定