1

だから私はしばらくこれに取り組んできました。私はstackoverflowでここにある多くの例を試してから、ほとんどの日の間js/jqueryを読み始めましたが、まだこれに問題があります.

基本的に、クリックすると画面にスライドする非表示のメニュー項目を作成でき、クラスを切り替えることで開くために使用されるボタンを変更し、それを送り返すことができました。

しかし、そのプロセスを初めて実行した後、もう一度開こうとすると、開いてから自動的に閉じます。

私はjsfiddleを構築しましたが、私のサイトと同じように機能していないため、間違っています。

フィドル: http://jsfiddle.net/VpnrV/1/

サイト: http://ericbrockmanwebsites.com/dev4/

コード - html:

<div id="dashboard">
    <nav id="access">
        <div class="open"></div>Here's a bunch of content representing the nav bar.
    </nav>
</div> <!-- dashboard -->

CSS:

#dashboard {
  font-size:30px;
  float:left;
  position: absolute;
  right: -653px;
  z-index: 100;
}

#access {
    display: block;
    float: right;
    margin: 10px auto 0;
    width:730px;
}

.open {
  background: #cabd32 url(images/open.png) top left no-repeat;
  float:left;
  padding:13px 30px 16px;
}

.close {
  background: #cabd32 url(images/close.png) top left no-repeat;
  float:left;
  padding:13px 30px 16px;
}

私の笑えるjs：

$(document).ready(function() {  
    $('.open').click(function() {
        $('#dashboard').animate({ right: '0' });
            $(this).toggleClass('close'); 
            $('.close').click(function() {
            $('#dashboard').animate({right: '-653'});
         }
  );
 });

どんな助けでも大歓迎です！

4

2 に答える 2

2

実際には、ワンクリックイベントでこれを行うことができます。これは、open をクリックするたびに close クラスを探し、そこにある場合はメニューを閉じ、開いていない場合はメニューを閉じるだけです。close次に、クラスを切り替えます。

$(document).ready(function () {
    $('.open').on("click", function () {
        if ($(this).hasClass('close')) {
            $('#dashboard').animate({
                right: '-653'
            });
        } else {
            $('#dashboard').animate({
                right: '0'
            });
        }

        $(this).toggleClass('close');
    });
});

これが最も効率的かどうかはわかりませんが、あなたの例ではうまくいきます。私もそれを更新しました：http://jsfiddle.net/VpnrV/3/

于 2013-02-28T23:18:29.927 に答える
2

ボタンをクリックするたびに、実際にはクラス .close を複数のコールバックにバインドしています。

あなたはこれを試すことができます：

$('.open').bind('click',function(){ 
    $('#dashboard').stop().animate(
    {
        right: $(this).hasClass('close') ? '-653px' : '-400px'
    });
    $(this).toggleClass('close');
});

animate() の前に stop() があると、現在のアニメーションがキャンセルされ、複数のアニメーションをキューに入れることなく次のアニメーションが実行されます。

于 2013-02-28T23:29:43.520 に答える