[英]jQuery click function on menu li anchor - slideToggle not working (WordPress)
[英]jQuery .on("click", ".dropdown-menu li a", function () not working
我正在嘗試創建一個下拉菜單,它將顯示用戶使用引導程序選擇的任何選項,但它不起作用。 我在$(document).on("click", ".dropdown-menu li a", function () {
和$(".dropdown-menu li a").on("click", function () {
$(document).on("click", ".dropdown-menu li a", function () {
設置了斷點$(".dropdown-menu li a").on("click", function () {
但他們永遠不會到達。HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sorting Algorithms</title>
<meta name="description" content="Sorting Algorithms">
<meta name="author" content="vader-coder">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
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>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--<link rel="stylesheet" href="css/styles.css?v=1.0">-->
<script src="app.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button type="button" class="btn btn-primary">Show Algorithm</button>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Array Length
</button>
<div class="dropdown-menu" id="arrayLength" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">20</a>
<a class="dropdown-item" href="#">10</a>
<a class="dropdown-item" href="#">5</a>
</div>
</div>
</nav>
<!--Div for graph-->
<div id="graph"></div>
</body>
</html>
JavaScript 文件“app.js”
$(document).ready(function () {
$('dropdown-toggle').dropdown();
});
$(".dropdown-menu li a").on("click", function () {
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
$(document).on("click", ".dropdown-menu li a", function () {
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
$("#arrayLength > a").on('click', function () {
$('#dropdownMenuButton').text($(this).val());
//$(this).parents(".btn-group").find('.selection').text($(this).text());
//$(this).parents(".btn-group").find('.selection').val($(this).text());
});
我嘗試將.dropdown-menu li a
替換為.dropdown-menu a
作為evolutionxbox在評論中建議的並且它起作用了。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.