这个真的很简单,但我不知怎么理解它。
我有一个包含 3 个选项的 Bootstrap 下拉菜单。
我的页面将托管 3 个 div,默认情况下应该隐藏。
单击下拉列表中的选项之一时,我希望显示相关的 div。
HTML:
<div class="dropdown d-flex justify-content-center">
<button class="btn bg-dark text-light dropdown-toggle rounded-bottom" style="border-radius: 0 !important;" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Secure Acceptance Silent Order POST / Checkout API</button>
<div id="target" class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button value="1" class="master dropdown-item" type="button">Auth/Sale using Transaction Endpoint</button>
<button value="2" class="master dropdown-item" type="button">Auth/Sale using iFrame Transaction Endpoint</button>
<button value="3" class="master dropdown-item" type="button">Auth/Sale with Token Creation</button>
</div>
</div>
<div id="1" class="SAformX hidden" style="background-color:red;">
<p>gergeyherghdesghderh</p>
</div>
<div id="2" class="SAformY hidden" style="background-color:blue;">
<p>gergeyherghdesghderh</p>
</div>
<div id="3" class="SAformZ hidden" style="background-color:green;">
<p>gergeyherghdesghderh</p>
</div>
默认情况下,隐藏类的表单将被隐藏:
<style>
.hidden{
visibility: hidden;
}
</style>
使用 Vanilla Javascript,我想生成一个元素节点,其中包含与下拉列表中的每个按钮/选项相关的 Master 类。然后,我想将其相关 ID 传递给另一个函数,其中:
这样,每次单击下拉选项时,页面都会“软重置”并隐藏所有未选择的 div。
Javascript:
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.master').forEach(item => {
item.addEventListener('click', () => {
const id = item.value;
MasterMenuToggle(id);
});
});
})
function MasterMenuToggle(id) {
document.querySelectorAll('.SAform').forEach(item => {
item.className = "hidden";
})
document.getElementById(id).className = "visible"
}
</script>
这里的问题是我的函数 MasterMenuToggle 的“重置”部分
document.querySelectorAll('.SAform').forEach(item => {
item.className = "hidden";
})
单击下拉项确实会显示其相关的 div,但随后它们会继续出现而没有其他隐藏。
我可以遍历 ID 以简单地向每个 DIV 添加一个内联 CSS 以确保安全吗?
希望能帮到你!
答案 0 :(得分:2)
您需要使用 classList.add 或 classList.remove 函数。
所以如果你想显示,使用remove删除隐藏,否则使用.add再次隐藏。
例如item.classList.add("隐藏");或 item.classList.remove("hidden")
您可以使用 classList 执行许多操作,此处说明:
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
答案 1 :(得分:1)
您使用了隐藏所有 div 的代码
function MasterMenuToggle(id) {
document.querySelectorAll('.SAform').forEach(item => {
item.className = "hidden";
})
}
但是您的 div 的类名称是“SAformX”、“SAformY”和“SAformZ”。所以 querySelectorAll('.SAform') 找不到任何 div。您可以将“SAform”类名添加到隐藏的 div 中。
*抱歉我的英语不好:/
这是工作的JSFiddle https://jsfiddle.net/7nf18dr6/3/
答案 2 :(得分:0)
hiddenDivs = document.querySelectorAll('.SAform');
document.addEventListener('DOMContentLoaded', function() {
hiddenDivs.forEach((x) => x.classList.add('.hidden'));
document.querySelectorAll('.master').forEach((item) => {
item.addEventListener('click', () => {
const id = item.value;
MasterMenuToggle(id);
});
});
});
function MasterMenuToggle(id) {
hiddenDivs.forEach((x) => {
if (x.id == id) {
x.classList.remove('hidden');
} else {
x.classList.add('hidden');
}
});
}
.hidden {
visibility: hidden;
}
<div class="dropdown d-flex justify-content-center">
<button class="btn bg-dark text-light dropdown-toggle rounded-bottom" style="border-radius: 0 !important;" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Secure Acceptance Silent Order POST / Checkout API
</button>
<div id="target" class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button value="1" class="master dropdown-item" type="button">Auth/Sale using Transaction Endpoint</button>
<button value="2" class="master dropdown-item" type="button">Auth/Sale using iFrame Transaction Endpoint</button>
<button value="3" class="master dropdown-item" type="button">Auth/Sale with Token Creation</button>
</div>
</div>
<div id="1" class="SAform " style="background-color:red;">
<p>gergeyherghdesghderh</p>
</div>
<div id="2" class="SAform " style="background-color:blue;">
<p>gergeyherghdesghderh</p>
</div>
<div id="3" class="SAform " style="background-color:green;">
<p>gergeyherghdesghderh</p>
</div>
答案 3 :(得分:0)
如果你把它分成两个阶段,这个任务就很简单了。第一阶段是在单击三个按钮之一时隐藏所有 div
元素,然后分别根据按钮和 div 的 value
& data-id
显示相关 div。您可以使用内联声明 hidden
而不是使用新类 (display='none'
),或者,如@connexo 上面所建议的,使用 hidden=true
~ 尽管我认为在方式上有所不同这些显示在页面上,一个不占空间,另一个会。
document.querySelectorAll('div#target > button').forEach( bttn=>{
bttn.addEventListener('click',function(e){
let col=document.querySelectorAll('div[data-id]');
col.forEach( div=>{ div.style.display='none' } )
document.querySelector('div[ data-id="'+this.value+'"]').style.display='block'
})
})
/* css here only to prettify things */
div{ padding:0.25rem; color:white }
button{padding:0.5rem;margin:0.25rem;}
<div class="dropdown d-flex justify-content-center">
<button class="btn bg-dark text-light dropdown-toggle rounded-bottom" style="border-radius: 0 !important;" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Secure Acceptance Silent Order POST / Checkout API
</button>
<div id="target" class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button value="1" class="master dropdown-item" type="button">Auth/Sale using Transaction Endpoint</button>
<button value="2" class="master dropdown-item" type="button">Auth/Sale using iFrame Transaction Endpoint</button>
<button value="3" class="master dropdown-item" type="button">Auth/Sale with Token Creation</button>
</div>
</div>
<!-- HTML element IDs cannot begin with a number, use a dataset attribute instead -->
<div data-id=1 class="SAformX hidden" style="background-color:red;">
<p>Red div - data-id=1</p>
</div>
<div data-id=2 class="SAformY hidden" style="background-color:blue;">
<p>Blue div - data-id=2</p>
</div>
<div data-id=3 class="SAformZ hidden" style="background-color:green;">
<p>Green div - data-id=3</p>
</div>