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是网页上用户点击的元素的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是click事件的触发器.yourMenu是您正在折叠和展开的元素的类。小提琴下面：

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

CSS3 - 进行简单的点击下拉菜单

3 个答案: