在html中切换视图

Question

我有2个视图，一个是地图视图，一个是餐馆的网格视图。我有一个切换它们之间切换。它们都在身体里。我有一个javascript函数可以在下面切换它们

  $(function() {
    $('#map-toggle').change(function(){
        if ($(this).prop('checked')){
            document.getElementById("restaurants").style.height = "0%";
            document.getElementById("restaurants").style.width = "0%";
            document.getElementById("map").style.height = "100%";
            document.getElementById("map").style.width = "100%";
            getLocation(true);
        }else{
            document.getElementById("map").style.height = "0%";
            document.getElementById("map").style.width = "0%";
            document.getElementById("restaurants").style.height = "100%";
            document.getElementById("restaurants").style.width = "100%";
        }
    })
})

地图工作正常，但切换到地图视图时网格视图不会消失。网格视图位于正文中的地图视图之前。有谁知道如何解决这一问题？

Answer 1

Jquery有hide()and show()methods：

  $(function() {
    $('#map-toggle').change(function(){
    if ($(this).prop('checked')){
        $('#restaurants').hide();
        $('#map').show();
        getLocation(true);
    }else{
        $('#map').hide();
        $('#restaurants').show();
    }
})})

jQuery Effects - Hide and Show

希望这可以帮助。

Answer 2

您可以使用toggleClass()或toggle()来隐藏和显示元素

  $(function() {
    $('#map-toggle').click(function() {
      $("#restaurant").toggleClass('hide')
      $("#map").toggleClass('hide')
    });
  })

class="hide"can是任何东西，可以有任何风格

要么

  $(function() {
    $('#map-toggle').click(function() {
     $("#restaurant, #map").toggle();
    });
 })

检查这个JSFiddle