正如標(biāo)題所示，我試圖在單擊下拉菜單并“打開”時(shí)將其添加到下拉菜單中，并在下拉菜單關(guān)閉后刪除相同的類。我的代碼在單擊/打開下拉菜單時(shí)添加該類，但在下拉菜單關(guān)閉時(shí)不會(huì)將其刪除。到目前為止，這是我的代碼：<html><head></head><body> <div class="dropdown" id="dropDownDiv"> <button class="btn btn-secondary dropdown-toggle dropdownButton" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="inputEffect()"> <span class="dropdownText" id="dropText">V?lg m?rke</span><i class="fas fa-chevron-down fasDropDown"></i> </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </body></html><script>function inputEffect() { var button = document.getElementById("dropdownMenuButton"); var element = document.getElementById("dropText"); if(button.hasAttribute("aria-expanded", "true")) { element.classList.add("myEffect"); }}</script><style>.myEffect { position: absolute; left: 11% !important; top: -35% !important; background-color: white; color: #3faf8f; }</style>
4 回答
弒天下
TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超8個(gè)贊
該hasAttribute方法不會(huì)評(píng)估屬性的值，它只是檢查它是否存在，這意味著您的 if 語句錯(cuò)誤地評(píng)估為 true。你想使用getAttribute：
function inputEffect() {
var button = document.getElementById("dropdownMenuButton");
var element = document.getElementById("dropText");
if(button.getAttribute("aria-expanded") === "true") {
element.classList.remove("myEffect");
button.setAttribute("aria-expanded", "false");
} else {
element.classList.add("myEffect");
button.setAttribute("aria-expanded", "true");
}
}
飲歌長(zhǎng)嘯
TA貢獻(xiàn)1951條經(jīng)驗(yàn) 獲得超3個(gè)贊
我建議您不要使用 onclick 函數(shù)，而是使用突變觀察器，這樣當(dāng)用戶單擊選擇和退出時(shí)它就會(huì)切換。如this fiddle所示，它不僅在單擊時(shí)觸發(fā)，還在選擇之外單擊時(shí)觸發(fā)。并且您的JS將更改為：
var button = document.getElementById("dropdownMenuButton");
var element = document.getElementById("dropText");
window.MutationObserver = window.MutationObserver
|| window.WebKitMutationObserver
|| window.MozMutationObserver;
var target = document.getElementById("dropdownMenuButton");
observer = new MutationObserver(function(mutation) {
if(button.getAttribute("aria-expanded") == 'true') {
element.classList.add("myEffect");
}else{
element.classList.remove("myEffect");
}
}),
config = {
attributes: true
};
observer.observe(target, config);
https://jsfiddle.net/okv8fjgd/1/
但是，如果這不是您想要實(shí)現(xiàn)的目標(biāo)，只需將 if 語句更改為
if(button.getAttribute("aria-expanded") == 'true') {
element.classList.add("myEffect");
}else{
element.classList.remove("myEffect");
}
開滿天機(jī)
TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超13個(gè)贊
還有另一種方法可以解決這個(gè)問題，但是如果使用不當(dāng)，這種方法可能會(huì)出現(xiàn)一些錯(cuò)誤。另外，您必須確保下拉菜單的初始狀態(tài)肯定是關(guān)閉的。您也可以將其初始狀態(tài)設(shè)置為打開，但您必須相應(yīng)地調(diào)整代碼。只要使用方法就可以了toggle。
function inputEffect() {
var element = document.getElementById("dropText");
element.classList.toggle("myEffect");
}
狐的傳說
TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超3個(gè)贊
該hasAttribute()方法只有一個(gè)參數(shù)。我認(rèn)為您想檢索屬性值。你可以用getAttribute()它。
function inputEffect() {
var button = document.getElementById("dropdownMenuButton");
var element = document.getElementById("dropText");
if (button.getAttribute("aria-expanded") === true) {
element.classList.add("myEffect");
} else {
element.classList.remove("myEffect");
}
}
您還可以使用classList.toggle(<class>)來避免if完全編寫該語句，而不是使用classList.add().
- 4 回答
- 0 關(guān)注
- 151 瀏覽
添加回答
舉報(bào)
0/150
提交
取消