嗨，我想構建一個導航，通過單擊生成的向下箭頭來彈出子選單。遺憾的是我無法觸發點擊事件。我閱讀了這個主題的一些答案，但他們不想作業。我嘗試了帶有附加選擇器的 .on 方法，并在呼叫前檢查了選擇器，但按鈕只是不想觸發。
html選單：
<ul class="menu-links">
<li><a href="#">Nur Link</a></li>
<li class="has-subs"><a href="#">Nur untermenu Test</a>
<ul>
<li><a href='#'>Das ist ein Linktitel</a></li>
<li><a href='#'>Das ist ein Linktitel</a></li>
<li><a href='#'>Das ist ein Linktitel</a></li>
<li><a href='#'>Das ist ein Linktitel</a></li>
</ul>
</li>
<li><a href="#">Links zu lang</a></li>
<li><a href="#">Links mit Favs</a></li>
<li><a href="#">Links mit CTA</a></li>
<li><a href="#">Links mit Bild</a></li>
<li><a href="#">Alles</a></li>
</ul>
JS：
function checkSize() {
let size = parseInt($('#responsive-check').css('content').replace('"', ''));
gSize = size;
$(window).on('resize', function (e) {
let size = parseInt($('#responsive-check').css('content').replace('"', ''));
gSize = size;
});
}
function modalEvents() {
let modalOpen
let $tgt = $('#bars').children('i');
$('#mobMenu').on('show.bs.modal', function (e) {
$tgt.removeClass('bi-list');
$tgt.addClass('bi-x');
});
$('#mobMenu').on('hidden.bs.modal', function (e) {
$tgt.removeClass('bi-x');
$tgt.addClass('bi-list');
});
}
var navM = {
settings: {
$tgt: $('#main-nav')
},
g:{
$trigMenu : $('#bars'),
$data : $('.nav-items')
},
init: function (options) {
jQuery.extend(navM.settings, options);
navM.openMobile();
modalEvents();
navM.collapsedMenu();
},
openMobile: function () {
let $tgtI = navM.g.$trigMenu.children("i");
navM.g.$trigMenu.on('click', function () {
if ($tgtI.hasClass('bi-list')) {
dynModal.init("open", navM.g.$data.html());
} else {
dynModal.init("close", '');
}
})
},
collapsedMenu:function(){
navM.g.$data.find('.menu-links li').each(function(i){
let $t = $(this);
var $button = $('<div></div>').addClass('subs').html('<i ></i>');
if($t.children('ul').length>0){
$t.wrapInner('<div></div>').append('');
$button.clone(true).appendTo($t.find('div'));
console.log($t);
console.log($button);
$t.children('div').on("click",'.subs', function(){
console.log('Make me happy!!!!');
});
}
})
}
}
var dynModal = {
init: function (op, data) {
let $tgt = $('#mobMenu');
let $tgtCnt = $tgt.find('.modal-body');
if (op == "open") {
$tgtCnt.html(data);
$tgt.modal('show');
} else {
$tgtCnt.html('');
$tgt.modal('hide');
}
}
}#responsive-check{display:none;content:"0"}.top-nav{display:none}nav#main-nav{height:55px;background:#ededed;display:flex;flex-direction:row;justify-content:space-between;padding:0 15px;box-shadow:rgba(0,0,0,0.1) 0 4px 12px;border-bottom:2px solid #fff;position:fixed;z-index:99999;width:100%;top:0}nav#main-nav ul{list-style:none;margin:0;padding:0}nav#main-nav .logo img{max-height:35px;width:auto;margin-top:10px}nav#main-nav .resp-nav{display:flex;flex-direction:row;align-items:center}nav#main-nav .resp-nav .btn{background-color:#fff;display:block;margin:5px 8px 0!important;padding:4px 10px;border:transparent}nav#main-nav .resp-nav .btn i{color:#EF7300;font-size:20px;color:#894200;transition:color,.5s ease-in-out}nav#main-nav .resp-nav .btn:hover i{color:#ffa756}.nav-items{display:none}.menu-links{list-style:none;padding:0;margin:0}.menu-links li{padding:10px 5px;transition:all,.5s;border-bottom:#ccc 1px solid}.menu-links li a{display:block;text-decoration:none;font-family:roboto;font-size:15px;color:#222;flex-grow:2}.menu-links li ul{list-style:none;margin:0;padding:0 0 0 10px;display:none}.menu-links li ul li{border-bottom:0;color:#333}.menu-links li ul li:after{content:"";display:block;width:100px;height:1px;background-color:#ccc;width:0;transition:width,.5s}.menu-links li ul li:hover:after{width:100px}.menu-links li.has-subs div{display:flex;flex-direction:row;justify-content:space-between}.menu-links li.has-subs div div.subs{background-color:#EF7300;margin:-10px -5px -10px 0;padding-top:10px;transition:background-color,.5s;cursor:pointer}.menu-links li.has-subs div div.subs i{color:#fff;margin:8px}.menu-links li.has-subs div div.subs:hover{background-color:#ffa756}.menu-links li:hover,.menu-links li.has-subs:hover{background-color:#fff;padding-left:10px}form{display:flex;flex-direction:row;margin-bottom:15px;align-items:center}form input.search-field{width:100%;border-top-left-radius:50px;border-bottom-left-radius:50px;padding:5px;border:0;padding:5px 15px}form input.search-field:active,form input.search-field:focus-visible,form input.search-field:focus{border-color:transparent!important;border:0}form button.search-submit{background-color:#fff;border:0;border-top-right-radius:50px;border-bottom-right-radius:50px;padding:6px 10px 5px}form button.search-submit i{background-color:#EF7300;border-radius:40px;padding:3px 7px;color:#fff;transition:background-color,.5s}form button.search-submit i:hover{background-color:#894200}#mobMenu .modal-body{background-color:#ddd}@media (min-width:576px){#responsive-check{display:none;content:"576"}}@media (min-width:768px){#responsive-check{display:none;content:"768"}}<!doctype html>
<html lang="en">
<head>
<title>Standard Template</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS v5.0.2 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Bootstrap icon Font -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- CSS IMPORTE-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap" rel="stylesheet">
<!-- Benutzerdeffinierte CSS -->
</head>
<body>
<div class="modal hide fade mt-4" id="mobMenu" data-bs-backdrop="false" tabindex="-1" aria-hidden="true">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-body pt-5">
</div>
</div>
</div>
</div>
<!-- Obere Navigation-->
<nav class="top-nav">
<div class="container-fluid">
<div class="d-flex justify-content-between">
<div class="top-phone">
<i class="bi bi-telephone-fill"></i> 040 / 225 689 788 <span class="spacer"></span><i class="bi bi-envelope-fill"></i> <a href="#">[email protected]</a>
</div>
<div class="top-links">
<a href="#">Impressum</a> <span class="spacer"></span> <a href="#">Datenschutzverordnung</a> <span class="spacer"></span> <a href="#">Kontakt</a>
</div>
</div>
</div>
</nav>
<!-- Hauptnavigation-->
<nav id="main-nav">
<a href="#" class="logo"><img src="img/logo.png"></a>
<div class="resp-nav">
<buttton class="btn btn-primary" id="bars"><i class="bi bi-list mob-menu"></i></buttton>
<buttton class="btn btn-secondary" class="cart"><i class="bi bi-cart-fill"></i></buttton>
</div>
</nav>
<div class="nav-items">
<form>
<input type="input" placeholder="Suchbegriff" class="search-field">
<button type="submit" class="search-submit"><i class="bi bi-search"></i></button>
</form>
<ul class="menu-links">
<li><a href="#">Nur Link</a></li>
<li class="has-subs"><a href="#">Nur untermenu Test</a>
<ul>
<li><a href='#'>Das ist ein Linktitel</a></li>
<li><a href='#'>Das ist ein Linktitel</a></li>
<li><a href='#'>Das ist ein Linktitel</a></li>
<li><a href='#'>Das ist ein Linktitel</a></li>
</ul>
</li>
<li><a href="#">Links zu lang</a></li>
<li><a href="#">Links mit Favs</a></li>
<li><a href="#">Links mit CTA</a></li>
<li><a href="#">Links mit Bild</a></li>
<li><a href="#">Alles</a></li>
</ul>
</div>
<div id="responsive-check"></div>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Zus?tzliche Bibliotheken -->
<!-- JSON-->
<!-- Benutzerdeffiniertes JS -->
</body>
</html>collapsedMenu:function(){
navM.g.$data.find('.menu-links li').each(function(i){
let $t = $(this);
var $button = $('<div></div>').addClass('subs').html('<i ></i>');
if($t.children('ul').length>0){
$t.wrapInner('<div></div>').append('');
$button.clone(true).appendTo($t.find('div'));
console.log($t);
console.log($button);
$t.children('div').on("click",$button, function(){
console.log('make me happy!!!!!!');
});
}
})
}
}
uj5u.com熱心網友回復：
在openMobile函式中，您將 html 放在 modal 中dynModal.init("open", navM.g.$data.html());，這會導致非活動事件。
你需要像這樣改變：
dynModal.init("open", navM.g.$data);
在模態變數中：
$tgtCnt.html(data.children());
完整代碼在這里：
function modalEvents() {
let modalOpen
let $tgt = $('#bars').children('i');
$('#mobMenu').on('show.bs.modal', function (e) {
$tgt.removeClass('bi-list');
$tgt.addClass('bi-x');
});
$('#mobMenu').on('hidden.bs.modal', function (e) {
$tgt.removeClass('bi-x');
$tgt.addClass('bi-list');
});
}
var navM = {
settings: {
$tgt: $('#main-nav')
},
g: {
$trigMenu: $('#bars'),
$data: $('.nav-items'),
$modal: $('#mobMenu')
},
init: function (options) {
jQuery.extend(navM.settings, options);
navM.openMobile();
modalEvents();
navM.collapsedMenu();
},
openMobile: function () {
let $tgtI = navM.g.$trigMenu.children("i");
navM.g.$trigMenu.on('click', function () {
if ($tgtI.hasClass('bi-list')) {
dynModal.init("open", navM.g.$data);
} else {
dynModal.init("close", '');
}
})
},
collapsedMenu: function () {
navM.g.$data.find('.menu-links li').each(function (i) {
let $t = $(this);
var $button = $('<div></div>').addClass('subs').html('<i ></i>');
if ($t.children('ul').length > 0) {
$t.wrapInner('<div></div>').append('');
$button.clone(true).appendTo($t.find('div'));
$t.children('div').on("click",$button, function(){
console.log('make me happy!!!!!!');
});
}
})
}
}
var dynModal = {
init: function (op, data) {
let $tgt = $('#mobMenu');
let $tgtCnt = $tgt.find('.modal-body');
if (op == "open") {
$tgtCnt.html(data.children());
$tgt.modal('show');
} else {
$tgtCnt.html('');
$tgt.modal('hide');
}
}
}
navM.init()#responsive-check{display: none;content: "0"}.top-nav{display: none}nav#main-nav{height: 55px;background: #ededed;display: flex;flex-direction: row;justify-content: space-between;padding: 0 15px;box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;border-bottom: 2px solid #fff;position: fixed;z-index: 99999;width: 100%;top: 0}nav#main-nav ul{list-style: none;margin: 0;padding: 0}nav#main-nav .logo img{max-height: 35px;width: auto;margin-top: 10px}nav#main-nav .resp-nav{display: flex;flex-direction: row;align-items: center}nav#main-nav .resp-nav .btn{background-color: #fff;display: block;margin: 5px 8px 0 !important;padding: 4px 10px;border: transparent}nav#main-nav .resp-nav .btn i{color: #EF7300;font-size: 20px;color: #894200;transition: color, .5s ease-in-out}nav#main-nav .resp-nav .btn:hover i{color: #ffa756}.nav-items{display: none}.menu-links{list-style: none;padding: 0;margin: 0}.menu-links li{padding: 10px 5px;transition: all, .5s;border-bottom: #ccc 1px solid}.menu-links li a{display: block;text-decoration: none;font-family: roboto;font-size: 15px;color: #222;flex-grow: 2}.menu-links li ul{list-style: none;margin: 0;padding: 0 0 0 10px;display: none}.menu-links li ul li{border-bottom: 0;color: #333}.menu-links li ul li:after{content: "";display: block;width: 100px;height: 1px;background-color: #ccc;width: 0;transition: width, .5s}.menu-links li ul li:hover:after{width: 100px}.menu-links li.has-subs div{display: flex;flex-direction: row;justify-content: space-between}.menu-links li.has-subs div div.subs{background-color: #EF7300;margin: -10px -5px -10px 0;padding-top: 10px;transition: background-color, .5s;cursor: pointer}.menu-links li.has-subs div div.subs i{color: #fff;margin: 8px}.menu-links li.has-subs div div.subs:hover{background-color: #ffa756}.menu-links li:hover, .menu-links li.has-subs:hover{background-color: #fff;padding-left: 10px}form{display: flex;flex-direction: row;margin-bottom: 15px;align-items: center}form input.search-field{width: 100%;border-top-left-radius: 50px;border-bottom-left-radius: 50px;padding: 5px;border: 0;padding: 5px 15px}form input.search-field:active, form input.search-field:focus-visible, form input.search-field:focus{border-color: transparent !important;border: 0}form button.search-submit{background-color: #fff;border: 0;border-top-right-radius: 50px;border-bottom-right-radius: 50px;padding: 6px 10px 5px}form button.search-submit i{background-color: #EF7300;border-radius: 40px;padding: 3px 7px;color: #fff;transition: background-color, .5s}form button.search-submit i:hover{background-color: #894200}#mobMenu .modal-body{background-color: #ddd}@media (min-width: 576px){#responsive-check{display: none;content: "576"}}@media (min-width: 768px){#responsive-check{display: none;content: "768"}}<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="modal hide fade mt-4" id="mobMenu" data-bs-backdrop="false" tabindex="-1" aria-hidden="true">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-body pt-5">
</div>
</div>
</div>
</div>
<!-- Obere Navigation-->
<nav class="top-nav">
<div class="container-fluid">
<div class="d-flex justify-content-between">
<div class="top-phone">
<i class="bi bi-telephone-fill"></i> 040 / 225 689 788 <span class="spacer"></span><i
class="bi bi-envelope-fill"></i> <a href="#">[email protected]</a>
</div>
<div class="top-links">
<a href="#">Impressum</a> <span class="spacer"></span> <a href="#">Datenschutzverordnung</a> <span
class="spacer"></span> <a href="#">Kontakt</a>
</div>
</div>
</div>
</nav>
<!-- Hauptnavigation-->
<nav id="main-nav">
<a href="#" class="logo"><img src="img/logo.png"></a>
<div class="resp-nav">
<buttton class="btn btn-primary" id="bars"><i class="bi bi-list mob-menu"></i></buttton>
<buttton class="btn btn-secondary" class="cart"><i class="bi bi-cart-fill"></i></buttton>
</div>
</nav>
<div class="nav-items">
<form>
<input type="input" placeholder="Suchbegriff" class="search-field">
<button type="submit" class="search-submit"><i class="bi bi-search"></i></button>
</form>
<ul class="menu-links">
<li><a href="#">Nur Link</a></li>
<li class="has-subs"><a href="#">Nur untermenu Test</a>
<ul>
<li><a href='#'>Das ist ein Linktitel</a></li>
<li><a href='#'>Das ist ein Linktitel</a></li>
<li><a href='#'>Das ist ein Linktitel</a></li>
<li><a href='#'>Das ist ein Linktitel</a></li>
</ul>
</li>
<li><a href="#">Links zu lang</a></li>
<li><a href="#">Links mit Favs</a></li>
<li><a href="#">Links mit CTA</a></li>
<li><a href="#">Links mit Bild</a></li>
<li><a href="#">Alles</a></li>
</ul>
</div>
<div id="responsive-check"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/385082.html
標籤：javascript 查询