0

私は tabSlideOut プラグイン ( http://www.building58.com/examples/tabSlideOut.html ) を使用しています。これは、ブラウザーのサイズを変更するとき以外はうまく機能します。コードは基本的に、ドキュメントの準備ができたときとブラウザのサイズ変更時にブラウザのサイズをチェックして、タブを表示するかどうかを決定します。ただし、タブのサイズを変更すると、タブが正常に機能せず、クリックすると何度もスライドインおよびスライドアウトします。誰でも手伝ってもらえますか?

function doMenu() {

    var width = $(window).width();

    if (width < 530) {


     $('.slide-out-div').tabSlideOut({
         tabHandle: '.handle',
         pathToTabImage: null,
         imageHeight: null,
         imageWidth: null,
         tabLocation: 'right',
         speed: 300,
         action: 'click',
         topPos: '0',
         leftPos: '20px',
         fixedPosition: false,
         toogleHandle: false
     });
   }

}
$(document).ready(doMenu);
$(window).resize(doMenu);
4

1 に答える 1

1

おそらく、tabSlideOutプラグインを複数回初期化しています。ブラウザー ウィンドウのサイズが変更されるたびにclick、スライド アニメーションを実行する新しいハンドラーが追加されます。次のようなものを試してください：

var menuInitialized = false;
var handle = null;
function doMenu() {
    if(handle === null) {
        handle = $(".handle");
    }
    var width = $(window).width();
    if (width < 530) {
        if(!menuInitialized) {
            //only call $.tabSlideOut once
            menuInitialized = true;
            $('.slide-out-div').tabSlideOut({
                tabHandle: '.handle',
                pathToTabImage: null,
                imageHeight: null,
                imageWidth: null,
                tabLocation: 'right',
                speed: 300,
                action: 'click',
                topPos: '0',
                leftPos: '20px',
                fixedPosition: false,
                toogleHandle: false
            });
        }
        handle.show();
   } else {
        handle.hide();
   }
}
$(document).ready(doMenu);
$(window).resize(doMenu);
于 2013-04-02T18:22:03.680 に答える