html 4方向の正方形divを追加する

Question

最初に正方形1の上に+を押すと、 が表示されます。 正方形2が出てくるので、正方形2の右にある+を押すと、 正方形3が出てきます。

私はこれを行うことができますか？または私はどのようにこれを行うことができますか？

Answer 1

あなたはjQueryのを使用している場合は、clickとshow方法は、あなたがの線に沿って、後にしているものです：

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

アニメーションはjQueryのanimate方法をよく読んで欲しい場合。

うまくいけば、これはあなたが始めることができます：ここで

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

Answer 2

は、あなたが何をしたいの実施例である、あなたはあなたの解決策を見つける願っています。ここ

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

はい、あなたがそれを行うことができ、完全な作業例 https://jsfiddle.net/ahmerrkhanzz/7tso9rvs/

Answer 3

のリンクである、あなたは

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

.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> 
 
\t </tbody> 
 
</table>