html在4个方向追加方形div答案

【问题标题】：html append square div in 4 directionshtml在4个方向追加方形div
【发布时间】：2016-09-22 00:43:48
【问题描述】：

首先，您将看到正方形数字 1 ，当您按正方形 1 顶部的 + 时，方块2会出来，你可以按方块2右边的+，然后方格 3 就会出来。

我可以这样做吗？或者我该怎么做？

【问题讨论】：

会从哪里出来？
请展示你的努力，展示你的代码。
当然可以。我们可以帮助您解决代码中的具体问题吗？

【解决方案1】：

如果您使用 jQuery，click 和 show 方法就是您所追求的，大致如下：

$('#one').click(function() {
  $('#two').show();
});
$('#two').click(function() {
  $('#three').show();
});

如果你想在 jQuery 的 animate 方法上阅读动画。

希望这可以帮助您入门：

https://jsfiddle.net/qb7mr9b6/1/

【讨论】：

【解决方案2】：

这是您想要的工作示例，希望您找到解决方案。

$('.show1').click(function() {
  $('#two').show();
});
$('.show2').click(function() {
  $('#three').show();
});

这是完整工作示例的链接 https://jsfiddle.net/ahmerrkhanzz/7tso9rvs/

【讨论】：

【解决方案3】：

是的，你可以做到，你会在下面的 Jsfiddle 中找到我的解决方案

jQuery(document).ready(function() {
   jQuery('.plus').on('click', function() {
	   if(jQuery('.one').is(":visible") != true){
		   jQuery('.one').removeClass('hide');
	   }else {
		   jQuery('.two').removeClass('hide');
	   }
	}); 
});

.box {
  background: grey;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: white;
  font-size: 24px;
  font-family: sans-serif;
}

.hide {
  display: none !important;
}

.plus {
  display: block;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 <table border="0" cellspacing="0" cellpadding="0">
  <tbody>
      <tr>
        <td>
          <div class="box one hide">2</div>
        </td>
        <td><a href="javascript:;" class="plus one hide">+</a></td>
        <td>
          <div class="box two hide">3</div>
        </td>
      </tr>
      <tr>
        <td><a href="javascript:;" class="plus">+</a>
          <div class="box">1</div>
        </td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
	</tbody>
</table>

【讨论】：