0

私は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が初めてなので、初心者の間違いを犯しているだけで、誰かが簡単に指摘できることを願っています.

助けてくれてありがとう。

-アンドリュー

4

2 に答える 2

0

css の変更と jquery へのいくつかの変更を含むフィドル ( http://jsfiddle.net/rFAxc/3/ ) を作成しました。jquery は次のようになりました。

Jクエリ:

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

チッ！

于 2013-06-14T19:00:11.153 に答える