「親カテ残して子カテの表示・非表示」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

親カテ残して子カテの表示・非表示

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>親カテ残して子カテの表示・非表示</title>
  6. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  7. <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
  9. <style type="text/css">
  10. .w{
  11.   display:table;
  12.   width:100%;
  13.   margin-top:1em;
  14. }
  16. .t{
  17.   display:table-cell;
  18.   vertical-align:top;
  19. }
  21. .img{
  22.   display:table-cell;
  23.   width:50px;
  24.   text-align:center;
  25.   vertical-align:top;
  26. }
  28. .line{
  29.   display:table;
  30.   width:100%;
  31. }
  33. .detail{
  34.   pDesing-top:0.5em;
  35.   pDesing-left:1em;
  36. }
  38. .ttl{
  39.   display:table-cell;
  40.   vertical-align:top;
  41. }
  43. h2.ttl{
  44.   margin:0;
  45.   font-size:1em;
  46. }
  48. .total{
  49.   display:table-cell;
  50.   width:300px;
  51.   text-align:right;
  52.   vertical-align:top;
  53. }
  55. .detail .line{
  56.   margin-top:5px;
  57.   padding-bottom:5px;
  58.   border-bottom:1px dotted #ccc;
  59. }
  61. .detail .ttl{
  62.   padding-left:1em;
  63. }
  65. .img img:hover{
  66.   cursor:pointer;
  67.   filter:alpha(opacity=30);
  68.   -moz-opacity:0.30;
  69.   opacity:0.30;
  70. }
  71. </style>
  73. <script type="text/javascript">
  74.   $(document).ready(function () {
  75.     function viewModel() {
  76.       var self = this;
  77.       
  78.       self.dataAry = ko.observableArray([
  79.         {
  80.           pNam: '鳥精', 
  81.           pDes: '鳥肉とネギを串にさしたヤツ', 
  82.           chil: [
  83.             {cNa: "たれ", cPr: "120円"},
  84.             {cNa: "塩", cPr: "120円"},
  85.             {cNa: "ネギ味噌", cPr: "150円"}
  86.           ]
  87.         },
  88.         {
  89.           pNam: '豚精', 
  90.           pDes: '豚肉とネギを串にさしたヤツ', 
  91.           chil: [
  92.             {cNa: "たれ", cPr: "120円"},
  93.             {cNa: "塩", cPr: "120円"},
  94.             {cNa: "塩麹", cPr: "150円"}
  95.           ]
  96.         },
  97.         {
  98.           pNam: '丸ごとシマウマ', 
  99.           pDes: 'シマウマを丸ごと串に刺したヤツ', 
  100.           chil: [
  101.             {cNa: "たれ", cPr: "110円"},
  102.             {cNa: "塩", cPr: "110円"},
  103.             {cNa: "ネギ味噌", cPr: "140円"},
  104.             {cNa: "塩麹", cPr: "140円"},
  105.             {cNa: "柚子コショウ", cPr: "960円"}
  106.           ]
  107.         }
  108.       ]);
  109.       
  110.       // クリックしたときの処理
  111.       self.clickData = function(thisData, allObj)
  112.       {
  113.         var dom = allObj.target;
  114.         var ary = $(dom).parents(".w").find(".detail");
  115.         
  116.         // 表示・非表示切り替え
  117.         ary.slideToggle();
  118.       };
  119.     }
  121.     ko.applyBindings(new viewModel());
  122.   });
  123. </script>
  126. </head>
  127. <body>
  128. <h1>親カテ残して子カテの表示・非表示</h1>
  129. <p>右のお花の画像クリックで表示・非表示</p>
  131. <!-- ko foreach: dataAry -->
  132. <div class="w">
  133.   <div class="t">
  134.     <div class="line">
  135.       <h2 class="ttl" data-bind="text: pNam"></h2>
  136.       <div class="total" data-bind="text: pDes"></div>
  137.     </div>
  138.     <div class="detail" data-bind="foreach: chil">
  139.       <div class="line">
  140.         <div class="ttl" data-bind="text: cNa"></div>
  141.         <div class="total" data-bind="text: cPr"></div>
  142.       </div>
  143.     </div>
  144.   </div>
  145.   <div class="img"><img href="//tips.recatnap.info/sample/images/sample_flow1.gif" data-bind="click: $root.clickData"></div>
  146. </div>
  147. <!-- /ko -->
  151. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  152. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  153. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  154. </div>
  156. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  157. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  158. </div>
  160. </body>
  161. </html>