javascript - 当我在图标 Bootstrap 中单击时展开网格系统列

Question

我在带有 bootstrap 的选项卡中有一个 google map ，但是 map 变小了，所以我想在单击 fa 图标时更改 bootstrap 网格系统，我希望第一列撕成 col-md-8，第二列被撕成 col-md-4。谢谢，

这里是我的代码:

<h2 class="block-title">Mapas Brasil</h1>
    <div class="row">
        <div class="col-md-6">
            <ul class="nav nav-tabs nav-cptec">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#menu1" role="tab">Condição Atual</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#menu2" role="tab">Aviso</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#menu3" role="tab">Temperaturas</a>
                </li>
            </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="menu1" role="tabpanel">
            <div id="map-canvas"></div>
        </div>
        <div class="tab-pane" id="menu2" role="tabpanel">Aviso</div>
        <div class="tab-pane" id="menu3" role="tabpanel">Temperaturas</div>
    </div>

<div class="col-md-6">
    <ul class="nav nav-tabs nav-justified nav-cptec">
        <li class="nav-item">
            <a class="d-flex align-items-center nav-link active" data-toggle="tab" href="#menu-1" role="tab">Anánalise Sinótica</a>
        </li>
        <li class="nav-item">
            <a class="d-flex align-items-center nav-link" data-toggle="tab" href="#menu-2" role="tab">Imagens de Satélite</a>
        </li>
        <li class="nav-item">
            <a class="d-flex align-items-center nav-link" data-toggle="tab" href="#menu-3" role="tab">Vale do Paraíba</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="menu-1" role="tabpanel">
            <img src="/images/sinotica.png" alt="" class="img-fluid">
        </div>
        <div class="tab-pane" id="menu-2" role="tabpanel">Satélite</div>
        <div class="tab-pane" id="menu-3" role="tabpanel">Vale</div>
    </div>
    <img src="http://i.imgur.com/mE72FHG.png" alt="Faça sua analise sinótica" class="img-fluid top5" width="100%">
  </div>
</div>

Answer 1

$('#abrir').click(function() {
    $('#teste').removeClass('col-md-6').addClass('col-md-8 open'); 
    $('#teste2').removeClass('col-md-6').addClass('col-md-4'); 
});

$('body').click(function(e){
    //Detect if click is outside #abrir AND is "open"
    if($(e.currentTarget).closest('#abrir').length==0 && $('#abrir').hasClass('open')){
        $('#teste').addClass('col-md-6').removeClass('col-md-8 open'); 
        $('#teste2').addClass('col-md-6').removeClass('col-md-4'); 
    }
});

这应该可以解决问题。你想要的是反转你在点击元素上所做的事情。在 body 上放置一个事件，以监听每次点击并在此处理程序内部，查看被点击的元素是在目标元素内部还是外部，以确保我们相应地触发。

您必须确保您页面上的所有点击处理程序都不会阻止事件冒泡(不应该，因为这是不好的做法)，否则元素外部的点击将不会总是被看到...