如何使用 show(), hide() & off() 隱藏 div 元素？

Question

我遇到了off() function，它用於關閉某些功能，所以我嘗試使用它來顯示和隱藏一個元素：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button onclick="showOrHide();">=</button> <div class="container-fluid" id="dDown"> <div class="row"> <div class="col-md-3 box-style"><a href="#">Home</a></div> <div class="col-md-3 box-style"><a href="#">About us</a></div> <div class="col-md-3 box-style"><a href="#">Contact</a></div> </div> </div> <script> function showOrHide() { $("#dDown").hide(); $("#dDown").click(function(){ $("#dDown").show(); $("#dDown").off("click"); }); } $(document).ready(function(){showOrHide();}); </script>

此代碼未顯示元素。

Answer 1

用這個：

function showOrHide()
{   
    if($("#dDown").is(":visible")){
        $("#dDown").hide();
    }
    else{
        $("#dDown").show();
        $("#dDown").off("click");
    }
}

Answer 2

您可以使用$("#dDown").toggle(); 解決這個問題

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button onclick="showOrHide();">=</button> <div class="container-fluid" id="dDown"> <div class="row"> <div class="col-md-3 box-style"><a href="#">Home</a></div> <div class="col-md-3 box-style"><a href="#">About us</a></div> <div class="col-md-3 box-style"><a href="#">Contact</a></div> </div> </div> <script> function showOrHide() { $("#dDown").toggle(); } $(document).ready(function(){showOrHide();}); </script>