Question

我要在此处执行的操作：打开页面时，内容1处于活动状态，并且单击“打开地图”，然后内容2与内容1切换。“打开详细信息”也是如此，并且当我关闭地图或明细时，内容1也需要再次显示...

此外，例如，在打开详细信息然后打开地图之后，它们需要彼此切换。无需同时显示。当2或3关闭时，内容1需要再次显示...

$('#show-detail').on('click', function(event){
  event.preventDefault();
  $('.content3').slideToggle('slow', function(event){
    if($(this).is(':visible')){
      $('#show-detail').html('Close Detail');
    } else {
      $('#show-detail').html('Open Detail');
    }
  });
});

$('#show-map').on('click', function(event){
  event.preventDefault();
  $('.content2').slideToggle('slow', function(event){
    if($(this).is(':visible')){
      $('#show-map').html('Close map');
    } else {
      $('#show-map').html('Open map');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="content-wrapper">
      <ul class="ul-wrap">
        <li class="li-head"><i style="color:white;" class="far fa-building"></i>Summary</li>
        <a id="show-detail" href="#"><li class="li-head-right">Open Detail</li></a>
        <a id="show-map" href="#"><li class="li-head-right">Open Map</li></a>
      </ul>
      <div class="tabs-stage">
        <div class="content1 d-flex">
          <div class="d-image"><img src="https://dummyimage.com/120x120/000/fff"></div>
            <div class="align-top">
             Lorem Ipsum Text Text Text   
            </div>
        </div>
        <div class="content2" style="display:none;">
          Map here
          <div id="map"></div>
        </div>
        <div class="content3" style="display: none;">
          Details Here
        </div>
      </div>
</div>

Answer 1

$('#show-detail').on('click', function(event){
  event.preventDefault();
  toggleViews('content3');
});

$('#show-map').on('click', function(event){
  event.preventDefault();
  toggleViews('content2');
});

function toggleViews(elmClass) {
  var elm = $("." + elmClass);
  var isVisible = elm.is(':visible');

  $(".tabs-stage > div:visible").slideUp('slow', function() {
  	if(isVisible) {
      $(".content1").slideDown();
    } else {
      elm.slideDown();
    }
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="content-wrapper">
  <ul class="ul-wrap">
    <li class="li-head"><i style="color:white;" class="far fa-building"></i>Summary</li>
    <a id="show-detail" href="#"><li class="li-head-right">Open Detail</li></a>
    <a id="show-map" href="#"><li class="li-head-right">Open Map</li></a>
  </ul>
  <div class="tabs-stage">
    <div class="content1 d-flex">
      <div class="d-image"><img src="https://dummyimage.com/120x120/000/fff"></div>
        <div class="align-top">
         Lorem Ipsum Text Text Text   
        </div>
    </div>
    <div class="content2" style="display:none;">
      Map here
      <div id="map"></div>
    </div>
    <div class="content3" style="display: none;">
      Details Here
    </div>
  </div>
</div>

div与另一个div切换

1 个答案: