Как скрыть элемент div с помощью show (), hide () и off ()?

Question

Я натолкнулся на функцию off(), которая используется для отключения некоторых функций, поэтому я попытался показать и скрыть элемент, используя это:

<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

Вы можете использовать $("#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>

Answer 2

используйте это:

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