当我单击图标引导程序时展开网格系统列

Question

我在带有引导程序的选项卡中有一个谷歌地图，但是地图变得很小，所以我想在单击 fa 图标时更改引导程序网格系统，我希望将第一列撕裂为 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'); 
    }
});

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

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

Answer 2

我添加了此代码并将列从 col-md-6 更改为 col-md-4，但是当我点击退出时，不要回头。 javascript和你给我的一样

我的代码：

<div class="row">
    <div id="teste" 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&ccedil;&atilde;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">
                <i class="fa fa-arrow-circle-o-right" aria-hidden="true" id="abrir"></i>
            <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>