Question

我正在研究Wordpress主题。我的目标是在单击选项卡时有一个向下和向上滑动的顶部小部件。

我已经开始运行了，但我似乎无法让slideDown sildeUp缓和工作正常。

CSS：

#top-widget-area {
width: 100%;
Min-height: 240px;
background-color: #00937b;
display: none;
}

#top-widget-area-sub {
width: 100%;
height: 15px;
background-color: #00937b;
}

#top-widget-tab-show {
background-image:url(images/top-nav-tab.png);
background-repeat:no-repeat;
margin-left: 10%;
min-height: 64px;
width: 78px;
}

#top-widget-tab-hide {
background-image:url(images/top-nav-tab.png);
background-repeat:no-repeat;
margin-left: 10%;
min-height: 64px;
width: 78px;
display: none;

js

jQuery(document).ready(function() {
jQuery("#top-widget-area").slideUp('slow', function(){ jQuery(this).css('display','none'); });
jQuery("#top-widget-tab-show").click(function(){
    jQuery("#top-widget-area").slideDown('slow', function(){ jQuery(this).css('display','block'); });
    jQuery("#top-widget-tab-show").hide(1, function(){ jQuery(this).css('display','none'); });
    jQuery("#top-widget-tab-hide").show(1, function(){ jQuery(this).css('display','block'); });
});
jQuery("#top-widget-tab-hide").click(function(){
    jQuery("#top-widget-area").slideUp('slow', function(){ jQuery(this).css('display','none'); });
    jQuery("#top-widget-tab-hide").hide(1, function(){ jQuery(this).css('display','none'); });
    jQuery("#top-widget-tab-show").show(1, function(){ jQuery(this).css('display','block'); });
});
});

我是javascript的新手所以我希望我只是犯了一个noob错误而且很容易让人指出。

提前感谢您的帮助。

-Andrew

Answer 1

您可以抽象代码以更灵活地工作，而不是编写此类特定代码并调用特定ID来显示/隐藏。

Houdini是我写的一个脚本，可以完成你想要完成的任务：http://cferdinandi.github.io/houdini/

这是JavaScript：

$(function () {
    $('.collapse-toggle').click(function(e) { // When a link or button with the .collapse-toggle class is clicked
        e.preventDefault(); // Prevent the default action from occurring
        var dataID = $(this).attr('data-target'); // Get the ID of the target element
        $(dataID).toggleClass('active'); // Add or remove the '.active' class from the target element
    });
});

这是CSS：

.collapse-toggle {
    display: inline;
    visibility: visible;
    cursor: pointer;
}

/* If JavaScript is enabled, hide the collapsed element */
.collapse {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    /*  Add animation when content expands and collapses */
    -webkit-transition: opacity 0.35s ease;
       -moz-transition: opacity 0.35s ease;
        -ms-transition: opacity 0.35s ease;
         -o-transition: opacity 0.35s ease;
            transition: opacity 0.35s ease;
}

/*  When collapsed element has the .active class, show it 
 *  Uses max-height instead of display: none to allow for 
 *  CSS3 animations, which don't work on display values. */
.collapse.active {
    max-height: 9999em;
    opacity: 1;
}

这是HTML：

<p><a class="collapse-toggle" data-target="#collapse1" href="#">Click to Show</a></p>

<div class="collapse" id="collapse1">
    Now you see me, now you don't.
</div>

您只需将collapse-toggle类应用于要触发隐藏/显示效果的任何内容，然后使用data-target属性指定要隐藏/显示的内容的ID。使用collapse类将隐藏内容包装在div中，并确保ID匹配。

这种方法允许您编写一次JS，然后根据需要在HTML中多次应用它，而无需添加添加脚本。

Answer 2

我创建了一个小提琴（http://jsfiddle.net/rFAxc/3/），它有一些css更改和jquery的一些更改。 jquery现在如下：

Jquery的：

jQuery(document).ready(function () {
    jQuery("#top-widget-area").slideUp('slow');
    jQuery("#top-widget-tab-show").click(function () {
        jQuery("#top-widget-tab-hide").show();
        jQuery("#top-widget-tab-show").hide()
        jQuery("#top-widget-area").slideDown();
    });
    jQuery("#top-widget-tab-hide").click(function () {
        jQuery("#top-widget-tab-hide").hide();
        jQuery("#top-widget-tab-show").show();
        jQuery("#top-widget-area").slideUp();
    });
});

CSS更新如下：

#top-widget-area {
    width: 100%;
    height: 240px;
    background-color: #00937b;
    display: block;
}
#top-widget-area-sub {
    width: 100%;
    height: 15px;
    background-color: #00937b;
}
#top-widget-tab-show {
    background-image:url(images/top-nav-tab.png);
    background-repeat:no-repeat;
    margin-left: 10%;
    height: 64px;
    width: 78px;
}
#top-widget-tab-hide {
    background-image:url(images/top-nav-tab.png);
    background-repeat:no-repeat;
    margin-left: 10%;
    height: 64px;
    width: 78px;
    display: none;
}

HTH！

需要som帮助.slideDown和.slideUp工作在wordpress主题

2 个答案: