CSS3 - Создание простого раскрывающегося списка

Question

Может ли кто-нибудь помочь мне с кодом для создания того же раскрывающегося списка, что и на этой странице?

http://uk.fjordblink.com/presentation/

Я хочу сделать то же самое, то же самое.

Итак, я получаю CSS за ним, например. #PresentationContainer.Pointer.PointerContent Однако, похоже, я не могу сделать выпадающее меню с уменьшающимся эффектом.

Кроме того, я, похоже, не могу сделать текст и фотографии отображаемыми в раскрывающемся списке, когда нажимается кнопка. Есть ли в этом php?

Заранее спасибо :)

Answer 1

Похоже, сайт использует Jquery для выполнения взаимодействия и анимации. Вы могли бы сделать что-то вроде этого:

$('#button_id').on('click', clickButton);  
function clickButton() 
{ 
    $(this).stop().slideToggle(); 
} 

Где button_id является идентификатор элемента на странице, что пользователь будет щелкать.

Для получения дополнительной информации о Jquery slideToggle: http://api.jquery.com/slidetoggle/

Answer 2

<script type="text/javascript"> 
     $(function() { 

      $("#PresentationContainer h3").click(function() { 

       // Check if this presentation is allready open? 
       bIsOpen = $(".PointerContent", $(this).parent()).css("display") == "block"; 

       $("#PresentationContainer .PointerContent").slideUp(); 

       // Open the current pointer content 
       if(! bIsOpen) 
       { 
        $(".PointerContent", $(this).parent()).slideDown("fast"); 
       } 

      }); 

      // Wrap all images in the lightbox area with an a tag 
      $("#PresentationContainer .GalleryContainer img").each(function() { 

       oLink = document.createElement("a"); 
       oLink.href = $(this).attr("src"); 

       if($(this).attr("title") != null) 
       { 
        oLink.title = $(this).attr("title"); 
       } 

       $(this).wrap(oLink); 

      }); 

      $("#PresentationContainer a[rel='lightbox']").click(function(e) { 

       $(".GalleryContainer a", $(this).parent()).lightBox({ 
        fixedNavigation: true, 
        imageLoading: "/static/lib/lightbox/images/lightbox-ico-loading.gif", 
        imageBtnClose: "/static/lib/lightbox/images/lightbox-btn-close.gif", 
        imageBtnPrev: "/static/lib/lightbox/images/lightbox-btn-prev.gif", 
        imageBtnNext: "/static/lib/lightbox/images/lightbox-btn-next.gif" 
       }); 

       $(".GalleryContainer a:first", $(this).parent()).trigger("click"); 

       e.preventDefault(); 

      }); 

     }); 
     </script> 

это кусок использования кода для этого эффекта, а также добавить необходимые файлы Jquery для надлежащей работы

Answer 3

JQuery! Ссылка на версию JQuery и добавить код, приведенный ниже

$('.yourClicker').click(function() { 
    $('.yourMenu').slideToggle(); 
    return false; 
}); 

Где .yourClicker является спусковым механизмом для события щелчка и .yourMenu является класс элемента, который вы разрушающейся и расширяется. скрипку ниже:

http://jsfiddle.net/Davidicus/k4LG9/