优化代码：!DOCTYPE html html head meta charset=utf-8 link rel=stylesheet href=stylecss link rel=stylesheet href=layuicsslayuicss titleFunnelstitle head body div class=Polaris-Stack Polaris-Stack--distribut
<!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>
<style>
.header {
margin-top: 1px;
border-bottom: 1px #c1c1c1 solid;
padding: 5px;
}
.header .logo {
display: flex;
align-items: center;
justify-content: space-between;
}
.header .logo .button-group {
display: flex;
align-items: center;
}
.header .logo .button-group .button-item {
margin-right: 10px;
}
.header .logo .button-group .button-item:last-child {
margin-right: 0;
}
.dropdown-content {
display: none;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<div class="button-group">
<a data-polaris-unstyled="true" class="Polaris-Button button-item" href="index.html">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Dashboard</span>
</span>
</a>
<a data-polaris-unstyled="true" class="Polaris-Button button-item" href="zone.html">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Checkout Zones</span>
</span>
</a>
<a data-polaris-unstyled="true" class="Polaris-Button button-item" href="funnel.html">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Funnels</span>
</span>
</a>
<a data-polaris-unstyled="true" class="Polaris-Button button-item" href="help.html">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Help Center</span>
</span>
</a>
<div class="Polaris-ButtonGroup button-item">
<button type="button" id="moreSetting" 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>
</button>
<div id="dropdownContent" class="dropdown-content">
<a href="payment.html">Payment</a>
<a href="facebookPixel.html">Pixel</a>
</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>
// 点击按钮时触发事件
$("#moreSetting").click(function(e) {
e.stopPropagation(); // 阻止事件冒泡，防止立即隐藏下拉列表
var dropdown = $("#dropdownContent");
dropdown.toggle();
});
// 点击页面其他地方时隐藏下拉列表
$(document).click(function(e) {
var dropdown = $("#dropdownContent");
// 检查点击事件是否发生在下拉列表以外的区域
if (!dropdown.is(e.target) && dropdown.has(e.target).length === 0) {
dropdown.hide();
}
});
</script>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/imXO 著作权归作者所有。请勿转载和采集!