12

ページの左側に「メニュー」ボタンがあり、選択すると、メニュー項目を含む div が表示されます。次に、メニューを非表示にするために選択できる別のボタンがあります。

理想的には、これを (左から右に) スライドさせたり戻したりしたいのですが、うまく機能させることができませんでした。animate と SlideToggle を使用してみましたが、私が持っているものではうまく機能しません。任意のヒント？

<div id="cat_icon">Menu</div>
<div id="categories">
    <div CLASS="panel_title">Menu</div>
    <div CLASS="panel_item">
        <template:UserControl id="ucCategories" src="UserControls/ProductCategories.ascx" />
    </div>
</div>

$('#cat_icon').click(function () {
    $('#categories').toggle();
    $('#cat_icon').hide();
});
$('.panel_title').click(function () {
    $('#categories').toggle();
    $('#cat_icon').show();
});
4

5 に答える 5

16

これを参照してください:デモ

$('#cat_icon,.panel_title').click(function () {
   $('#categories,#cat_icon').stop().slideToggle('slow');
});

更新 : 左から右にスライドするには: Demo2

注: 2 つ目は jquery-ui も使用します

于 2013-01-21T13:03:24.943 に答える
6

#categories最初に非表示

#categories {
    display: none;
}

次に、JQuery UIを使用して、Menuゆっくりとアニメーション化します

var duration = 'slow';

$('#cat_icon').click(function () {
    $('#cat_icon').hide(duration, function() {
        $('#categories').show('slide', {direction: 'left'}, duration);});
});
$('.panel_title').click(function () {
    $('#categories').hide('slide', {direction: 'left'}, duration, function() {
        $('#cat_icon').show(duration);});
});

JSFiddle

ミリ秒単位でいつでも使用できます

var duration = 2000;

隠したい場合はclass='panel_item'、両方panel_titleを選択してpanel_item 

$('.panel_title,.panel_item').click(function () {
    $('#categories').hide('slide', {direction: 'left'}, duration, function() {
        $('#cat_icon').show(duration);});
});

JSFiddle

于 2013-01-21T12:53:04.583 に答える
1

これを使って...

$('#cat_icon').click(function () {
    $('#categories').toggle("slow");
    //$('#cat_icon').hide();
});
$('.panel_title').click(function () {
    $('#categories').toggle("slow");
    //$('#cat_icon').show();
});

この例を参照してください

ご挨拶。

于 2013-01-21T12:45:43.323 に答える