切換當前元素的可見性

Question

我正在嘗試編寫 function toggle_active以在單擊時顯示隱藏的內容，並在再次單擊時再次折疊內容。 可悲的是，它不起作用。 你能幫我修改一下嗎？

 function toggle_active(this){ var x = this.nextSibling; if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; }; }

 .daccord_b{ display:none; }

 <header class="ca_h" onclick="toggle_active(this);"> <i class="i i-plus ca_hi"></i> Title </header> <div class="had daccord_b">Hidden content</div>

Answer 1

使用方法nextElementSibling返回下一個元素。 並且沒有必要使用if {}運算符。

不要在函數中將this用於 arguments。

您的任務更正確的方法是方法toggle() ，您的 class 在 ZC7A62 .daccord_b .daccord_b 中使用該方法。

 function toggle_active(el) { var x = el.nextElementSibling; x.classList.toggle("daccord_b"); }

 .daccord_b { display: none; }

 <header class="ca_h" onclick="toggle_active(this);"> <i class="i i-plus ca_hi"></i> Title </header> <div class="had daccord_b">Hidden content</div>

使用style.display的第二種解決方案。

 function toggle_active(el) { var x = el.nextElementSibling; x.style.display = x.style.display === 'block'? 'none': 'block'; }

 .daccord_b { display: none; }

 <header class="ca_h" onclick="toggle_active(this);"> <i class="i i-plus ca_hi"></i> Title </header> <div class="had daccord_b">Hidden content</div>

Answer 2

您在此代碼中有一些語法錯誤。 首先，我建議您將 function arguments 命名為除此之外的其他名稱，因為this是this中的保留關鍵字。

其次，我建議在聯系之前向 W3School 咨詢這些簡單的問題，因為大多數情況下，有一個簡單的解決方案:)

這是一個鏈接，可以完全解決您所描述的問題。

https://www.w3schools.com/howto/howto_js_collapsible.asp

而且，這是一個示例以及如何實現此目的：

 let content = document.getElementById("content"); function handleClick() { if (content.classList.contains("hide")) { content.classList.remove("hide"); } else { content.classList.add("hide"); } }

 .my-content { display: block; }.my-content.hide { display: none; }

 <button onclick="handleClick()">Toggle</button> <div class="my-content" id="content">Hello, some content</div>

編輯如果您決定將 jQuery 引入您的項目，即使使用狂熱的代碼行也可以實現它：

 $("[data-collapse]").on('click', function () { let target = $(this).data('collapse'); $(target).toggle(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button data-collapse="#content">Clicker</button> <div id="content"> My Content </div>

這使其抽象且可重用，甚至允許您執行單獨容器之類的操作：

 $("[data-collapse]").on('click', function () { let target = $(this).data('collapse'); $(target).toggle(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button data-collapse="#target1">Collapse #1</button> <button data-collapse="#target2">Collapse #2</button> <div id="target1"> <h1>I'm Target #1</h1> </div> <div id="target2"> <h1>I'm target #2</h1> </div>

Answer 3

js:

function toggle_active(id){
      var x = document.getElementById(id);
      if (x.style.display === "none" || x.style.display === "") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      };
    }

html：

    <header class="ca_h" onclick="toggle_active('HiddenContent');">
   toggle
</header>
<div class="had daccord_b" id='HiddenContent'>Hidden content</div>

Answer 4

如果可以，最好在處理程序 function 中使用事件 object。 請閱讀這篇文章，然后嘗試相應地修復您的代碼： 參數 e（事件）到底是什么以及為什么將其傳遞給 JavaScript 函數？

有關Event.currentTarget的更多信息： https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

 function toggle_active(evt){ var x = evt.currentTarget.nextElementSibling; x.classList.toggle('daccord_b'); }

 .daccord_b { display: none; }

 <header class="ca_h" onclick="toggle_active(event);"> <i class="i i-plus ca_hi"></i> Title </header> <div class="had daccord_b">Hidden content</div>