简化代码：使用 JavaScript 创建下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="layui/css/layui.css">
<title>Funnels</title>
</head>
<body>
<div class="Polaris-Stack Polaris-Stack--distributionEqualSpacing Polaris-Stack--alignmentCenter" style="margin-top: 1px;border-bottom: 1px #c1c1c1 solid;padding: 5px;">
<div class="Polaris-Stack__Item">
<div class="Polaris-Stack Polaris-Stack--spacingTight Polaris-Stack--alignmentCenter">
<div class="Polaris-Stack__Item">
<div class="sc-1ibht3l-0 uqRZq">
</div>
<div class="sc-1ibht3l-1 hIZedH">
<div class="Polaris-ButtonGroup">
<div class="Polaris-ButtonGroup__Item">
<a data-polaris-unstyled="true" class="Polaris-Button" href="index.html">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Dashboard</span>
</span>
</a>
</div>
<div class="Polaris-ButtonGroup__Item">
<a data-polaris-unstyled="true" class="Polaris-Button" href="zone.html">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Checkout Zones</span>
</span>
</a>
</div>
<div class="Polaris-ButtonGroup__Item">
<a data-polaris-unstyled="true" class="Polaris-Button" href="funnel.html">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Funnels</span>
</span>
</a>
</div>
<div class="Polaris-ButtonGroup__Item">
<a data-polaris-unstyled="true" class="Polaris-Button" href="help.html">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Help Center</span>
</span>
</a>
</div>
<div class="Polaris-ButtonGroup__Item">
<div>
<button type="button" id="moreSeting" class="Polaris-Button" tabindex="0" aria-controls="Popover486" aria-owns="Popover486" aria-haspopup="true" aria-expanded="false">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">More</span>
<span class="Polaris-Button__Icon">
<span class="Polaris-Icon">
<svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
<path d="M5 8l5 5 5-5z" fill-rule="evenodd"></path>
</svg>
</span>
</span>
</span>
<div id="dropdownContent" class="dropdown-content">
<!-- 这里放下拉列表的内容 -->
<a href="payment.html">Payment</a>
<a href="facebookPixel.html">Pixel</a>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 引入 jQuery 库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://uzi666.top/shopline_admin_statuc/css/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="app/js/global.js" charset="utf-8"></script>
<!-- 在文档加载完成后执行以下脚本 -->
<script>
$(document).ready(function() {
// 点击按钮时触发事件
$("#moreSeting").click(function(e) {
e.stopPropagation(); // 阻止事件冒泡，防止立即隐藏下拉列表
var dropdown = $("#dropdownContent");
dropdown.toggle();
});
<pre><code> // 点击页面其他地方时隐藏下拉列表
$(document).click(function(e) {
var dropdown = $("#dropdownContent");
// 检查点击事件是否发生在下拉列表以外的区域
if (!dropdown.is(e.target) && dropdown.has(e.target).length === 0) {
dropdown.hide();
}
});
});
</script>
</body>
</code></pre>
</html>
原文地址: https://www.cveoy.top/t/topic/p4YB 著作权归作者所有。请勿转载和采集!