javascript - jQuery .show()无法正确显示

因此，基本上我想做一个事件，如果单击一个选项卡，则两个按钮组消失（.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();
});

最佳答案

似乎是第二个按钮组中的向右拉类引起了这种麻烦。我删除了它，并且过渡是完美的。感谢大家！