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

Question

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

0

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

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

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

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

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

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

Patrick 10 янв. 2014, в 17:47

Источник

0

PHP не связан с этим эффектом, они используют JQuery .slideDown()
cmorrissey 10 янв. 2014, в 16:31

Теги:

javascript

jquery

css3

drop-down-menu

3 ответа

0

<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 для правильной работы

Karthick Kumar 10 янв. 2014, в 15:51

0

JQuery! Ссылка на версию jquery и добавление кода, показанного ниже.

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

Где.yourClicker - это триггер для события click, а.yourMenu - это класс элемента, который вы свертываете и расширяете. скрипка ниже:

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

Davidicus 10 янв. 2014, в 14:42

Ещё вопросы

PHP не связан с этим эффектом, они используют JQuery .slideDown()

Buchow_PHP · Accepted Answer · 2014-01-10T15-14-00.000Z

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

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

Где button_id - это идентификатор элемента на вашей странице, который пользователь нажимает.

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

Это путь. очень легко и обеспечивает хорошую анимацию по умолчанию. @Buchow_PHP есть какая-то польза от использования вашей версии по сравнению с более кратким $ ('# button_id'). Click (function () {$ (this) .stop (). SlideToggle ();});