如何以適當的方式隱藏Div

Question

在我的Asp Web應用程序中，我具有以下HTML div，我需要通過單擊<a>標記隱藏這些div。

 function showHide() { var viewProductServiceDiv = document.getElementById("psDiv"); var psbGrid = document.getElementById("psbGrid"); var filterDiv = document.getElementById("filterDiv"); if (viewProductServiceDiv.style.display === "none") { psbGrid.style.display = "none"; filterDiv.style.display = "none"; viewProductServiceDiv.style.display = "block"; } else { psbGrid.style.display = "block"; filterDiv.style.display = "block"; viewProductServiceDiv.style.display = "none"; } } 

 <div class="container-fluid"> <div class="row search-row form-inline" id="filterDiv"> <div class="col-xs-6 text-left"> <a href="#" onclick="showHide(); return false;" style="text-decoration:underline">Show/Hide Divs</a> </div> <div class="col-xs-6 text-right"> </div> </div> <div class="row grid-row"> <div class="col-xs-12"> <div id="psbGrid"> </div> </div> <div class="col-xs-12"> <div id="psDiv"> <button id="backto" class="btn btn-default">Back</button> </div> </div> </div> </div> 

上面的代碼可以正常工作，但是看起來很丑，我認為這不是好的編碼實踐。 有任何可能的方法來改善此良好的代碼。 我可以使用JQuery來做到這一點嗎？ 那怎么辦

而且當單擊Back按鈕時filterDiv , psbGrid我還需要隱藏psDiv並顯示其他兩個divs（ filterDiv , psbGrid ），這是最好的方法

簡而言之，我需要通過單擊<a>標簽來隱藏filterDiv ， psbGrid div，並且在單擊psDiv按鈕時需要再次顯示這兩個div，並且需要隱藏psDiv div

Answer 1

您可以通過找到最接近的.row來定位下一個元素，然后在該元素上切換一個類：

 $('a').click(function(){ $(this).closest('.row').toggleClass('hideContent'); $(this).closest('.row').next().find('#psbGrid').toggleClass('hideContent'); $(this).closest('.row').next().find('#psDiv').toggleClass('hideContent'); }); $('#backto').click(function(){ $(this).closest('.row').prev().toggleClass('hideContent'); $(this).closest('.row').find('#psbGrid').toggleClass('hideContent'); $(this).closest('#psDiv').toggleClass('hideContent'); }); 

 .hideContent{ display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container-fluid"> <div class="row search-row form-inline" id="filterDiv"> <div class="col-xs-6 text-left"> <a href="#" style="text-decoration:underline">Show/Hide Divs</a> </div> <div class="col-xs-6 text-right"> </div> </div> <div class="row grid-row"> <div class="col-xs-12"> <div id="psbGrid"> psb Grid </div> </div> <div class="col-xs-12"> <div id="psDiv" class="hideContent"> <button id="backto" class="btn btn-default">Back</button> </div> </div> </div> </div> 

Answer 2

您不需要jquery與viewProductServiceDiv.classList.toggle("toggleCls"); 方法。

<style>
        .toggleCls {
          display:none;
        }

        </style>
        <div class="container-fluid">
                <div class="row search-row form-inline" id="filterDiv">
                    <div class="col-xs-6 text-left">
                      <a href="#"  onclick="showHide();" style="text-decoration:underline">Show/Hide Divs</a>
                    </div>
                    <div class="col-xs-6 text-right">
                    </div>
                </div>
                <div class="row grid-row">
                    <div class="col-xs-12">
                        <div id="psbGrid">
                        </div>
                    </div>
                    <div class="col-xs-12">
                        <div id="psDiv">
                            <button id="backto" class="btn btn-default">Back</button>
                        </div>
                    </div>
                </div>
        </div>
        <script>
        function showHide() {

            var viewProductServiceDiv = document.getElementById("psDiv");
            var psbGrid = document.getElementById("psbGrid");
            var filterDiv = document.getElementById("filterDiv");
            viewProductServiceDiv.classList.toggle("toggleCls");
        }
        </script>

這是https://jsfiddle.net/ptxdsvwn/7/

Answer 3

最簡單的方法是使用jQuery並執行類似的操作

$('a').click(function(){
    $("#filterDiv, #psbGrid").hide();
});

$('#backto').click(function(){
    $("#filterDiv, #psbGrid").show();
});

小提琴： https : //jsfiddle.net/sarbraj/3ky0xv94/7/

Answer 4

您可以使用jquery。您需要包含jQuery庫。

<script type="text/javascript" language="javascript">
function HideDiv() 
{
   $("#filterDiv").hide();
   $("#psbGrid").hide();
   $("#psDiv").show();
}
function ShowDiv()
{
   $("#filterDiv").show();
   $("#psbGrid").show();
   $("#psDiv").hide();
}
</script>

<div class="container-fluid">
  <div class="row search-row form-inline" id="filterDiv">
    <div class="col-xs-6 text-left">
      <a href="#" onclick="HideDiv();" style="text-decoration:underline">Show/Hide 
       Divs</a>
    </div>
    <div class="col-xs-6 text-right">
    </div>
  </div>
  <div class="row grid-row">
    <div class="col-xs-12">
      <div id="psbGrid">
      </div>
    </div>
    <div class="col-xs-12">
      <div id="psDiv" style="display:none">
        <button id="backto" onclick="ShowDiv();"  class="btn btn- 
        default">Back</button>
      </div>
    </div>
  </div>
</div>