Jquery 需要som帮助在wordpress主题中获取.slideDown和.slideUp

我正在研究Wordpress的主题。我的目标是有一个顶部的小部件部分，当点击一个标签时可以上下滑动

我已经开始工作了，但我似乎无法让滑下的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

您不需要编写这样的特定代码并调用特定的ID来显示/隐藏，而是可以将代码抽象出来，以便更灵活地工作

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>

现在你看到我了，现在你没有了。

您只需将

折叠切换

类应用于任何要触发隐藏/显示效果的对象，然后使用

数据目标

属性指定要隐藏/显示的对象的ID。使用

collapse

类将隐藏内容包装在div中，并确保ID匹配

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

我创建了一个fiddle（），它对css和jquery进行了一些更改。jquery现在如下所示：

#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;
}

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;
}

---

嗯

缓解措施如何不能正常工作？此外，请尝试在不使用

.slideDown（）

和

.slideUp（）

中的回调的情况下运行它。感谢您为我查看此内容，我所说的放松不起作用的意思是它没有上下滑动，或者如果它的动画设置得太快，它看起来就像是在向上或向上闪烁。我在show his上尝试了相同的代码，我看到了副作用，但slideDown slideUp没有。我删除了回调，没有任何更改。我正在使用下划线的主题fraimwork，可能有一些冲突，看起来像是一些很棒的代码，我可能会尝试一下，因为现在我不需要它更通用，我只是想让效果发挥作用，这样我就可以继续构建。我想说的是，这会给你同样的效果，代码更少，更干净，更容易阅读，并且最终更易于维护，因为如果您需要进行更新，您不必返回JS文件并添加或删除特定的div。Chris，是的，您是对的，您的代码效率更高，我将朝这个方向努力。我现在只是在学习，如果我把它编写得更具体一些，即使它很笨重，我也会更容易理解。谢谢你提供了一个很好的例子，我将把它作为我的项目的目标，但由于这是一个学习项目，所以仅仅复制粘贴它并不能教会我很多东西。再次感谢你，请考虑把这个作为答案，因为它会帮助其他人，可能会有类似的问题。谢谢