Jquery добавить нажмите, чтобы сдвинуть вверх панель? - PullRequest
Новая
       38

Jquery добавить нажмите, чтобы сдвинуть вверх панель?

0 голосов
/ 01 ноября 2010

У меня есть следующая слайд-панель, я собрал все вместе, используя учебники и т. Д. * 

$(document).ready(function() {

$(".dropdown dt a").click(function() {
    $(".dropdown dd #panel").slideDown(150);
});

$(".dropdown dd #panel a").click(function() {

    $(".dropdown dd #panel").slideUp(150);

});

var myTimeout = null; 
$(".dropdown").bind("mouseleave", function() { 
    myTimeout = window.setTimeout(function() { 
         $(".dropdown dd #panel").slideUp(150); // <-- 1000ms  
    }, 1000);$('.dropdown dt a').removeClass('active'); 
}); 

$(".dropdown dd #panel").bind("mouseenter",function() { 
    window.clearTimeout(myTimeout); 
});

});

Однако я не могу понять, как щелкнуть, чтобы вызвать панель.

В данный момент вы щелкаете, и панель сдвигается вниз, вы входите в панель и выходите, и она снова сдвигается вверх.

Я хочу добавить, что после того, как вы нажали, чтобы отобразить панель, вы также можете щелкнуть, чтобы закрыть ее?

Таким образом, у вас есть два способа закрыть его, отвести мышь или снова нажать кнопку. Возможно, добавление активного класса, чтобы у меня была стрелка или что-то изменилось, чтобы открыть, а затем закрыть?

Кто-нибудь может мне помочь, добавив функцию щелчка, чтобы сдвинуть назад?

Большое спасибо, если можете:) 

Thanks guys.

Пытался добавить свой код, Брайан, но ему удалось полностью его сломать, я, очевидно, не поставил его в нужное место: (

редактировать

Добавление совета Brians ... 

$(document).ready(function() {



$(".dropdown dt a").click(function(){
    if($(".dropdown dd #panel").hasclass('open'){
        $(".dropdown dd #panel").slideDown(150).addClass('open');
    } else {
       $(".dropdown dd #panel").slideUp(150).removeClass('open');
    }
});         


$(".dropdown dd #panel a").click(function() {
    $(".dropdown dd #panel").slideUp(150).removeClass('open');;
});

var myTimeout = null; 
$(".dropdown").bind("mouseleave", function() { 
    myTimeout = window.setTimeout(function() { 
         $(".dropdown dd #panel").slideUp(150); // <-- 1000ms  
    }, 1000);$('.dropdown dt a').removeClass('active'); 
}); 

$(".dropdown dd #panel").bind("mouseenter",function() { 
    window.clearTimeout(myTimeout); 
});

}); * 1 028 *

Ответы [ 2 ]

0 голосов
/ 01 ноября 2010
0 голосов
/ 01 ноября 2010

Вам нужно будет отслеживать состояние панели, потому что у вас есть два триггера закрытия (поэтому простого переключателя слушателя будет недостаточно).Вы можете добавить переменную js (хорошо, но не отлично) или использовать класс (лучше), чтобы отслеживать ее.Затем выполните условное тестирование прослушивателей, которые вы щелкаете, чтобы определить, что делать: 

$(".dropdown dt a").click(function(){
    if($(".dropdown dd #panel").hasClass('open'){
        $(".dropdown dd #panel").slideDown(150).addClass('open');
    } else {
       $(".dropdown dd #panel").slideUp(150).removeClass('open');
    }
});

Просто убедитесь, что вы добавили метод removeClass к близкому слушателю, который у вас есть и во внутреннем теге привязки: 

$(".dropdown dd #panel a").click(function() {
    $(".dropdown dd #panel").slideUp(150).removeClass('open');;
});
...