正如標題所示，我試圖在單擊下拉菜單并“打開”時將其添加到下拉菜單中，并在下拉菜單關閉后刪除相同的類。我的代碼在單擊/打開下拉菜單時添加該類，但在下拉菜單關閉時不會將其刪除。到目前為止，這是我的代碼：<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貢獻1818條經驗 獲得超8個贊
該hasAttribute方法不會評估屬性的值，它只是檢查它是否存在，這意味著您的 if 語句錯誤地評估為 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");
}
}
飲歌長嘯
TA貢獻1951條經驗 獲得超3個贊
我建議您不要使用 onclick 函數，而是使用突變觀察器，這樣當用戶單擊選擇和退出時它就會切換。如this fiddle所示，它不僅在單擊時觸發，還在選擇之外單擊時觸發。并且您的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/
但是，如果這不是您想要實現的目標，只需將 if 語句更改為
if(button.getAttribute("aria-expanded") == 'true') {
element.classList.add("myEffect");
}else{
element.classList.remove("myEffect");
}
開滿天機
TA貢獻1786條經驗 獲得超13個贊
還有另一種方法可以解決這個問題，但是如果使用不當，這種方法可能會出現一些錯誤。另外，您必須確保下拉菜單的初始狀態肯定是關閉的。您也可以將其初始狀態設置為打開，但您必須相應地調整代碼。只要使用方法就可以了toggle。
function inputEffect() {
var element = document.getElementById("dropText");
element.classList.toggle("myEffect");
}
狐的傳說
TA貢獻1804條經驗 獲得超3個贊
該hasAttribute()方法只有一個參數。我認為您想檢索屬性值。你可以用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 關注
- 152 瀏覽
添加回答
舉報
0/150
提交
取消