html 在 4 个方向上附加方形 div

Question

First, you will see square number 1 , when you press the + on top of square 1 , square 2 will come out and you can press the + on right of square 2, then square 3 will come out.

can i do this? or how can i do this?

Answer 1

If you are using jQuery, the click and show methods are what you're after, along the lines of:

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

If you want animation read up on jQuery's animate method.

Hopefully this helps you get started:

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

Answer 2

Here is the working example of what you want, hope you find your solution.

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

here is the link for complete working example https://jsfiddle.net/ahmerrkhanzz/7tso9rvs/

Answer 3

Yes you can do it, You will find my solution in Jsfiddle in this below

 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>