2013-04-03 3 views
0

Я хотел бы создать своего рода двойное выпадающее меню. Например, изначально поле выбора пуста со стрелкой вниз. Если вы нажмете стрелку, вы увидите раскрывающийся список с двумя записями: MA и NH. Если вы затем нажмете MA, вы получите еще один выпадающий список с Бостоном и Вустером. Если вы нажмете NH, вы получите раскрывающееся меню Concord и Nashua.cakePHP и double drop down

ответ

1

Насколько я знаю, это не связано с CakePHP. CakePHP - это серверная PHP-инфраструктура, а не клиентская библиотека. Это можно сделать с помощью JavaScript, я рекомендую использовать библиотеку jQuery здесь.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<div id="dropdown"> 
    Hover me 
    <div class="state"> 
     MA 
     <div class="city">Boston</div> 
     <div class="city">Worcester</div> 
    </div> 
    <div class="state"> 
     NH 
     <div class="city">Concord</div> 
     <div class="city">Nashua</div> 
    </div> 
</div> 

<style> 
    #dropdown{background-color: yellow;width:200px} 
    .state{background-color: orange;} 
    .city{background-color: lime;} 
    .city,.state{display:none} 
</style> 

<script> 
    $(document).ready(function(){ 
     $("#dropdown").mouseenter(function(){ 
      $(this).find(".state").show() 
      $(this).find(".city").hide() 
     }).mouseleave(function(){ 
      $(this).find(".state").hide() 
     }) 
     $(".state").mouseenter(function(){ 
      $(".city").hide() 
      $(this).find(".city").show() 
     }).mouseleave(function(){ 
      $(".city").hide() 
     }) 
    }) 
</script> 

Этот код является для примера. Он не оптимизирован, но работает на 100%.

Никогда не используйте встроенные стили и скрипты.

+0

Спасибо. Я новичок, ваш ответ считается встроенным стилем или сценарием? –

+0

Да, мой ответ считается встроенным стилем или скриптом. Но это поможет вам увидеть раскрывающийся список действий, просто скопировав и вставьте весь материал в . Конечно, вам лучше использовать файлы .css и .js для хранения скриптов и стилей. И если мой код работает для вас, оцените мой ответ :) – igorpavlov