親カテ残して子カテの表示・非表示
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="UTF-8">
- <title>親カテ残して子カテの表示・非表示</title>
- <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
- <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
- <style type="text/css">
- .w{
- display:table;
- width:100%;
- margin-top:1em;
- }
- .t{
- display:table-cell;
- vertical-align:top;
- }
- .img{
- display:table-cell;
- width:50px;
- text-align:center;
- vertical-align:top;
- }
- .line{
- display:table;
- width:100%;
- }
- .detail{
- pDesing-top:0.5em;
- pDesing-left:1em;
- }
- .ttl{
- display:table-cell;
- vertical-align:top;
- }
- h2.ttl{
- margin:0;
- font-size:1em;
- }
- .total{
- display:table-cell;
- width:300px;
- text-align:right;
- vertical-align:top;
- }
- .detail .line{
- margin-top:5px;
- padding-bottom:5px;
- border-bottom:1px dotted #ccc;
- }
- .detail .ttl{
- padding-left:1em;
- }
- .img img:hover{
- cursor:pointer;
- filter:alpha(opacity=30);
- -moz-opacity:0.30;
- opacity:0.30;
- }
- </style>
- <script type="text/javascript">
- $(document).ready(function () {
- function viewModel() {
- var self = this;
-
- self.dataAry = ko.observableArray([
- {
- pNam: '鳥精',
- pDes: '鳥肉とネギを串にさしたヤツ',
- chil: [
- {cNa: "たれ", cPr: "120円"},
- {cNa: "塩", cPr: "120円"},
- {cNa: "ネギ味噌", cPr: "150円"}
- ]
- },
- {
- pNam: '豚精',
- pDes: '豚肉とネギを串にさしたヤツ',
- chil: [
- {cNa: "たれ", cPr: "120円"},
- {cNa: "塩", cPr: "120円"},
- {cNa: "塩麹", cPr: "150円"}
- ]
- },
- {
- pNam: '丸ごとシマウマ',
- pDes: 'シマウマを丸ごと串に刺したヤツ',
- chil: [
- {cNa: "たれ", cPr: "110円"},
- {cNa: "塩", cPr: "110円"},
- {cNa: "ネギ味噌", cPr: "140円"},
- {cNa: "塩麹", cPr: "140円"},
- {cNa: "柚子コショウ", cPr: "960円"}
- ]
- }
- ]);
-
- // クリックしたときの処理
- self.clickData = function(thisData, allObj)
- {
- var dom = allObj.target;
- var ary = $(dom).parents(".w").find(".detail");
-
- // 表示・非表示切り替え
- ary.slideToggle();
- };
- }
- ko.applyBindings(new viewModel());
- });
- </script>
- </head>
- <body>
- <h1>親カテ残して子カテの表示・非表示</h1>
- <p>右のお花の画像クリックで表示・非表示</p>
- <!-- ko foreach: dataAry -->
- <div class="w">
- <div class="t">
- <div class="line">
- <h2 class="ttl" data-bind="text: pNam"></h2>
- <div class="total" data-bind="text: pDes"></div>
- </div>
- <div class="detail" data-bind="foreach: chil">
- <div class="line">
- <div class="ttl" data-bind="text: cNa"></div>
- <div class="total" data-bind="text: cPr"></div>
- </div>
- </div>
- </div>
- <div class="img"><img href="//tips.recatnap.info/sample/images/sample_flow1.gif" data-bind="click: $root.clickData"></div>
- </div>
- <!-- /ko -->
- <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
- <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
- <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
- </div>
- <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
- Copyright © 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
- </div>
- </body>
- </html>