应该隐藏跨度

Question

我的html输出是实际的：http://jsfiddle.net/52VtD/3408/

但它应该是这样的：

当用户点击其中一列时（例如，中间的列应该如下所示：

我的html结构简单： 这些数字均为span，其中包含numbers类：

.numbers{
  width:70px;
  text-align:center;
  float: left;
}
.text{
  width:200px;
  float: left;
  background-color: red;
}

文本包含在类text的跨度中。 这两个框numbers和text位于span，其中包含ContainerSpan类：

.ContainerSpan {
    float:left;
    width:70px;
    overflow:hidden;
}

其实我的jquery有效！我遇到的唯一问题就是我怎么说红色文字在开头并没有隐藏！我希望你能帮帮我！感谢

http://jsfiddle.net/52VtD/3408/

<div class="row">
  <div class="col-lg-12">

  <span id="BOX">
    <span id="firstSpan" class="ContainerSpan">
      <span class="numbers">
        <p>02342</p>
        <p>24500</p>
        <p>34510</p>
        <p>24500</p>
      </span>
      <span class="text">
        <p>first</p>
        <p>second</p>
        <p>third</p>
        <p>forth</p>
      </span>
    </span>
    <span id="secondSpan" class="ContainerSpan">
      <span class="numbers">
        <p>92342</p>

Answer 1

试试this版本。

我将display: none;添加到.text CSS并有条件地调用.show()以显示正确的列文本。此外，任何当前可见的.text都是预先隐藏的，因此一次只显示一列。

Answer 2

我想你正在看这个。

http://jsfiddle.net/5Fus5/

将这些添加到CSS：

.text{
  width:200px;
  float: left;
  background-color: red;
  display:none;
}
.ContainerSpan.ShowFull{
    width: 270px;
}
.ContainerSpan.ShowFull .text{
    display: block;
}

和JS

$('.ContainerSpan').click(function(){
  $('.ContainerSpan').removeClass('ShowFull');
  $(this).addClass('ShowFull');
});

Answer 3

<script>
$('.ContainerSpan').click(function(){
  // Reset values
  $('.text').css("display", "none");
  $('.ContainerSpan').width(70);

  // Show current column text
  $(this).find('.text').css("display", "block");
  $(this).width(270);
});
</script>

<style>

.text{
  width:200px;
  float: left;
  background-color: red;
  /* Add default display none for .text */
  display: none;
}
</style>

更新了小提琴：http://jsfiddle.net/52VtD/3411/