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

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 新手，所以我希望我只是犯了一个菜鸟错误，并且很容易有人指出。

提前感谢您的帮助。

-安德鲁

Answer 1

我创建了一个小提琴 (http://jsfiddle.net/rFAxc/3/)，它对您的 jquery 进行了一些 css 更改和一些更改。现在的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！

Answer 2

您可以将代码抽象为更灵活地工作，而不是编写此类特定代码并调用特定 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 中根据需要多次应用它，而无需添加额外的脚本。