2015-10-26 59 views
1

我想隱藏除第一個以外的所有子div。當我從第一個div選擇一個無線電選項時,顯示第二個。這是我的代碼。隱藏除第一個以外的所有子div。當我從第一個div選擇無線電選項時,顯示第二個

<?php if ($options) { ?> 
<div class="options <?php echo $this->journal2->settings->get('product_page_options_push_classes'); ?>"> 
    <h3><?php echo $text_option; ?></h3> 
    <?php foreach ($options as $option) { ?> 
    <?php if ($option['type'] == 'radio') { ?> 
    <div class="option form-group<?php echo ($option['required'] ? ' required' : ''); ?> option-<?php echo $option['type']; ?>"> 
     <label class="control-label"><?php echo $option['name']; ?></label> 
     <div id="input-option<?php echo $option['product_option_id']; ?>"> 
     <?php foreach ($option['product_option_value'] as $option_value) { ?> 
     <div class="radio"> 
      <label> 
       <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" class="clickclass" /> 
       <?php echo $option_value['name']; ?> 
       <?php if ($option_value['price']) { ?> 
       (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>) 
       <?php } ?> 
      </label> 
     </div> 
     <?php } ?> 
     </div> 
    </div> 
    <?php } ?> 
    <?php } ?> 
</div> 
<?php } ?> 

這是我的輸出。

enter image description here

默認情況下,只有先設置的選項「自定義大小」應該會出現。當我點擊任何一個單選按鈕時,應該出現下一組「自定義樣式」。

有沒有辦法實現它?

+1

你需要共享生成的HTML樣本 –

+0

我把它完成。 Thankyou @ArunPJohny :) –

+0

請檢查此第三方模塊。您可以使用。 http://www.opencart.com/index.php?route=extension/extension/info&extension_id=23337&filter_search=option – HarnishDesign

回答

1

你需要的是這樣的:

<html> 
<head> 
    <style> 
     div { 
      border: 1px solid; 
      margin: 20px; 
      padding: 20px; 
      width: 200px; 
     } 
     .secound { 
      display: none; 
     } 
    </style> 
    <script> 
    //you need jQuery 
    $(function(){ 
     $('.first input').change(function(){ 
      $('.secound').fadeIn('slow') 
     }) 
    }); 
    </script> 
</head> 
<body> 
    <div class="first"> 
     <p>First Div</p> 
     <label>small</label><input type="radio" name="name" value="value"> 
     <label>medium</label><input type="radio" name="name" value="value1"> 
     <label>large</label><input type="radio" name="name" value="value2"> 
    </div> 
    <div class="secound"> 
    <p>Secound Div</p> 
     <label>small</label><input type="radio" name="name1" value="value"> 
     <label>medium</label><input type="radio" name="name1" value="value1"> 
     <label>large</label><input type="radio" name="name1" value="value2"> 
    </div> 
</body> 

觀看演示:http://jsfiddle.net/sabeti05/73oprqv0/

相關問題