このページでは、テーブルのリストを作成し、各 tr には次の 2 つのリンクがあります。1) 大人と 2) 特定のリンク (大人または子供の場合) をクリックすると、その位置に div が表示され、他のすべての位置の div は非表示になります。次または他のリンクをクリックすると、前のリンク div が非表示になります。
特定のリンクをクリックしたときに、非表示の div (div で非表示のプロパティを指定したため) を表示したい ------------ HTMLは次のとおりです:: --------- ---
<td>
<div class="tab-inner">
<p><span><strong>Space : <?php echo $row->space; ?></strong></span>
</p>
<p><a href="javascript:;" name="allocation" id="Adult_Allocation_<?php echo $j;?>" rel="#apop1_1" rev="Adult Allocation">Adult $<?php echo $row->adultPrice; ?></a>
<!-- <div id="SpanAdultAllot"></div>-->
</p>
<div style="display:none;" class="adult-wrapper">
<div class="adult-box">
<div class="adultborder">
<div id="adultallot" class="adult-msg">Adult Allocation</div> <span class="adult-select-no"></span>
</div><span class="adultarrow"></span>
<label id="adult" class="adultselect">Adult :</label>
<select class="selectorbox" id="adultselect" name="adult">
<option value="">--</option>
<?php for($i=1; $i<=$row->space; $i++) { ?>
<option value="<?php if($i==$row->space) echo " selected='selected' "; ?>">
<?php echo $i;?>
</option>
<?php } ?>
</select> <strong></strong>
</div>
</div>
<?php if($row->childPrice
<>'0'){ ?>
<p><a href="javascript:;" name="allocation" id="Adult_Allocation_<?php echo $j;?>" rel="#cpop1_1" rev="Child Allocation">Child $<?php echo $row->childPrice; ?></a>
</p>
<!--<div id="SpanChildAllot"></div>-->
<?php } ?>
</div>
</td>
----------ここでJSコード::-----------
$('a[name="allocation"]').live("click", function () {
$(this).parent().next('.adult-wrapper').show();
$('.adult-select-no').live("click", function () {
$(this).closest('.tab-inner').find('.adult-wrapper').hide();
});
});