Question

我在带有引导程序的选项卡中有一个谷歌地图，但地图变得很小，所以当我点击fa图标时，我想要更改引导网格系统，我想要第一列torns到col-md-8，并且第二列被撕裂成col-md-4。 THX，

这里是我的代码：

<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元素上做的事情。在主体上放置一个事件，以监听每次点击并在此处理程序内部，查看被点击的元素是否在目标元素的内部或外部，以确保我们相应地触发。

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

Answer 2

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

我的代码：

str

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

2 个答案: