英文:
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 "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" style="opacity: .8">
<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">
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper iframe-mode" data-widget="iframe" data-loading-screen="750">
<div class="nav navbar navbar-expand navbar-white navbar-light border-bottom p-0">
<div class="nav-item dropdown">
<a class="nav-link bg-danger dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">close</a>
<div class="dropdown-menu mt-0">
<a class="dropdown-item" href="#" data-widget="iframe-close" data-type="all">all</a>
<a class="dropdown-item" href="#" data-widget="iframe-close" data-type="all-other">other</a>
</div>
</div>
<a class="nav-link bg-light" href="#" data-widget="iframe-scrollleft"><i class="fas fa-angle-double-left"></i></a>
<ul class="navbar-nav overflow-hidden" role="tablist"></ul>
<a class="nav-link bg-light" href="#" data-widget="iframe-scrollright"><i class="fas fa-angle-double-right"></i></a>
<a class="nav-link bg-light" href="#" data-widget="iframe-fullscreen"><i class="fas fa-expand"></i></a>
</div>
<div class="tab-content">
<div class="tab-empty">
<h2 class="display-4">No tab selected!</h2>
</div>
<div class="tab-loading">
<div>
<h2 class="display-4">Tab is loading <i class="fa fa-sync fa-spin"></i></h2>
</div>
</div>
</div>
</div>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
const test = `
<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>
`;
$("#topScreenList").before(test);
</script>
</body>
</html>
`
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'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(".dropdown-menu").toggleClass("show");
}
// when the dropdown menu is clicked
$(".dropdown-toggle").on("click", function (e) {
e.stopPropagation(); // stop propagating click events
toggleDropdown($(this));
});
// Close all drop-down menus when the entire document is clicked
$(document).on("click", function () {
$(".dropdown-menu").removeClass("show");
});
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论