Question

所以基本上我想做一个事件，如果单击一个选项卡，两个按钮组消失（.hide（）），当单击另一个选项卡时，这两个按钮组重新出现（.show（））。所以，.hide（）没问题。最初，显示两个组：内联块，它就好了。但是当它们重新出现时，它们并不在同一条线上。

！[最初]：http://imgur.com/BrDF0jR,GEnwn4q#0 ！[后]：http://imgur.com/BrDF0jR,GEnwn4q#1

这是我的html，css和jQuery

HTML：

<div class="row" id="selection">
    <div class="col-lg-6">
        <ul class="nav nav-tabs nav-justified" role="tablist">
            <li class="active"><a href="#mod" data-toggle="tab"> module et orientation </a></li>
            <li><a href="#com" data-toggle="tab"> composantes </a></li>
        </ul>
...

<div class="mode-selector">
  <span class="mode">Mode: </span>
  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default" id="rad"> 
      <input type="radio" name="inlineRadioOptions" value="rad"> Radians 
    </label>
    <label class="btn btn-default" id="deg"> 
      <input type="radio" name="inlineRadioOptions" value="deg"> Degrés 
    </label>
  </div>  
</div>
<div class="mode-selector pull-right">
  <span class="mode">Format de la réponse: </span>
  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default" id="polaire"> 
      <input type="radio" name="inlineRadioOptions" value="rad"> Polaire 
    </label>
    <label class="btn btn-default" id="composantes"> 
      <input type="radio" name="inlineRadioOptions" value="deg"> Composantes 
    </label>
  </div>  
</div>

CSS：

.mode-selector{
    margin-top: 20px;
    text-align: center;
    margin-bottom: 10px;
    display: inline-block;
}

jQuery的：

$('#selection ul li:eq(1)').click (function() {
    $('.mode-selector').hide(); 
});

$('#selection ul li:eq(0)').on('click', function() {
    $('.mode-selector').show();
});

Answer 1

似乎第二个按钮组中的右拉类导致了这个问题。我删除它，过渡完美无瑕。谢谢大家！

jquery .show（）无法正确显示

1 个答案: