Question

有没有办法可以切换可见和隐藏之间的可见性，同时保留显示属性。我有两个标签可以显示列表，其中包含附近位置的所有详细信息和Bing地图。使用display属性时的问题是，使用地图ID来渲染地图。

当我切换显示属性时，Bing地图中的搜索结果无法按预期工作。所以我不得不使用visibility属性。有没有办法可以使用可见性隐藏和显示，同时不保留隐藏的容器的高度和空间？我已经尝试但无法提出解决方案。这是我到目前为止所尝试过的。

示例代码：

＆＃13;

$(document).ready(function() {

  $('ul.tabs li').click(function() {
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
  });
});

＆＃13;

ul.tabs {
  -webkit-padding-start: 15px !important;
  -webkit-padding-end: 15px !important;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

ul.tabs li {
  background: none;
  color: #222;
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
}

ul.tabs li.current {
  background: #ededed;
  color: #222;
}

.results-menu {
  text-align: center !important;
  margin: 10px !important;
  width: 100% !important;
}

.tab-content {
  visibility: hidden;
  padding: 15px;
}

.tab-content.current {
  visibility: visible;
}

.results-menu {
  text-align: center !important;
  margin: 10px !important;
  width: 100% !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container results-menu">
  <ul class="tabs">
    <li class="button-default tab-link current" data-tab="tab-1">LIST</li>
    <li class="button-default tab-link" data-tab="tab-2">MAP</li>
  </ul>
</div>
<div id="tab-1" class="tab-content current">
  <div class="hidden" id="mapDetails"></div>
</div>
<div id="tab-2" class="tab-content">
  <div id="myMap" class="col-xs-12 col-sm-12" style="display:none;"></div>
  <div id="legend" style="display:none;"></div>
</div>

＆＃13;

切换效果很好，但是当我切换时，我不想保留容器div的高度/宽度。任何帮助表示赞赏。

Answer 1

jQuery与否，这可以通过使用不透明度和指针事件轻松解决。您可以切换应用opacity: 1 or 0和pointer-events all or none。

的类

这样，元素及其数据就会保留，UI会按预期运行。

您可以拥有两个或更多容器，例如div是一个接一个，然后只是切换它们上面的类来显示一个并隐藏其他类。通过使用opacity，您可以直观地隐藏容器，并且使用pointer-events您将能够管理容器的可点击性。所以，如果你有5个容器并希望显示第三个容器，你可以在第三个容器和所有其他opacity: 1;上设置pointer-events: all和opacity: 0; pointer-events: none。

您可以通过切换容器上的类来应用这些样式。

希望这对你有好处:)）

Answer 2

尝试下面的代码。注意：我离开了你的一些类和样式，因为我无法弄清楚你想要做什么。技巧是在jQuery代码中。

$(document).ready(function() {

  $('ul.tabs li').click(function() {
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $('.tab-content').hide();
    $("#" + tab_id).show();
  });
});

ul.tabs {
  -webkit-padding-start: 15px !important;
  -webkit-padding-end: 15px !important;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

ul.tabs li {
  background: none;
  color: #222;
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
}

ul.tabs li.current {
  background: #ededed;
  color: #222;
}

.results-menu {
  text-align: center !important;
  margin: 10px !important;
  width: 100% !important;
}

.tab-content {
  padding: 15px;
}

.tab-content.current {
  visibility: visible;
}

.results-menu {
  text-align: center !important;
  margin: 10px !important;
  width: 100% !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="container results-menu">
  <ul class="tabs">
    <li class="button-default tab-link current" data-tab="tab-1">LIST</li>
    <li class="button-default tab-link" data-tab="tab-2">MAP</li>
  </ul>
</div>
<div id="tab-1" class="tab-content current">
  <div class="hidden" id="mapDetails">This is tab one content</div>
</div>
<div id="tab-2" class="tab-content" style="display:none;">
  <div>This is tab two content</div>
  <div id="myMap" class="col-xs-12 col-sm-12" style="display:none;"></div>
  <div id="legend" style="display:none;">This is tab two content</div>
</div>

Answer 3

我必须为我遇到的问题做一个肮脏的修复。具有ID“myMap”和“mapDetails”的DIV的高度具有670px的固定高度。当我切换两个标签之间的可见性时，我将另一个标签的高度设置为0px，这实际上解决了我的问题。这就是我所做的。

if(tab_id == "tab-1"){
        console.log("If statement triggered");
        $("#myMap").attr("style", "height:0px;");
        $("#mapDetails").attr("style", "height:670px;");
    }else if(tab_id == "tab-2"){
        console.log("Else If statement triggered");
        $("#mapDetails").attr("style", "height:0px;");
        $("#myMap").attr("style", "height:670px;");
    }else{
        console.log("Else statement triggered");
    }

在切换可见性

3 个答案: