我已在网站页脚创建了电子邮件订阅表格。但问题是,当我单击关闭图标时,表单不会消失。
var button = document.querySelector("#close");
button.addEventListener("click", function() {
var t = document.querySelector(div.getAttribute("data-target"));
t.style.display = "none" == t.style.display ? "block" : "none"
});
<div class="hook-section js-common-hook">
<div class="hook-content small-hook-show">
<div class="loader">
Loading...
</div>
<div class="hook-close-btn sprite-img">Close</div>
<div class="top-sec clearfix">
<div class="left-sec sprite-img">
</div>
<div class="right-sec">
<h5>Email Newsletter</h5>
<p>The best of technology updates from India and around the world</p>
</div>
</div>
<div class="bootom-sec">
<form class="hook-form" action='https://feedburner.google.com/fb/a/mailverify?uri=TechLekhak' method='post' onsubmit='window.open
('https://feedburner.google.com/fb/a/mailverify?uri=12c55',
'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input placeholder="Enter your email id" name="email" type="text" />
<input value="12c55" name="uri" type="hidden" />
<input value="en_US" name="loc" type="hidden" /><button class="subs-btn">Subscribe Now</button>
</form>
</div>
</div>
</div>
最佳答案
您与查询选择器匹配了错误的内容。 您正在尝试获取具有“close”id 的元素,但代码中没有。
这可以通过将 id="close"
添加到您想要触发您定义的点击功能的标签来安排
示例:
<div id="close" class="hook-close-btn sprite-img">Close</div>
与您要关闭的项目匹配的查询选择器也会发生同样的情况...它不存在,您需要调整它
您可以更改页面周围的id="toggle"
,以查看这些元素是打开和关闭的
这是一个片段
var toggler = document.querySelector("#close");
toggler.addEventListener("click", function() {
var toggleElement = document.querySelector("#toggle");
if (!toggleElement.style.display || toggleElement.style.display === "block") {
toggleElement.style.display = "none";
} else {
toggleElement.style.display = "block";
}
});
<div class="hook-section js-common-hook">
<div class="hook-content small-hook-show">
<button id="close" class="hook-close-btn sprite-img">Close</button>
<div class="top-sec clearfix">
<div class="left-sec sprite-img">
</div>
<div class="right-sec">
<h5>Email Newsletter</h5>
<p>The best of technology updates from India and around the world</p>
</div>
</div>
<div class="bootom-sec">
<form id="toggle" class="hook-form" action='https://feedburner.google.com/fb/a/mailverify?uri=TechLekhak' method='post' onsubmit='window.open
('https://feedburner.google.com/fb/a/mailverify?uri=12c55',
'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input placeholder="Enter your email id" name="email" type="text" />
<input value="12c55" name="uri" type="hidden" />
<input value="en_US" name="loc" type="hidden" /><button class="subs-btn">Subscribe Now</button>
</form>
</div>
</div>
</div>
关于javascript - 我正在尝试添加关闭功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55077852/