Question

我目前有一个像以下jsfiddle的设置。我使用javascript并不是很好，所以我设法将一些代码放在一起，告诉一个按钮从顶部向下滑动“包装”，另一个按钮从底部向上滑动包装。

如果你先点击'description-button'，这个事件就可以了。一旦您单击“联系人按钮”然后单击“描述按钮”，“描述按钮”就不再有效。

如果您在加载后首先单击“联系人按钮”并单击“描述按钮”秒，则同样适用 - 它不再有效。

JS

var clicked=false;
$(".contact-button").on('click', function(){
if(clicked)
{

clicked=false;
$(".wrapper").css({"top": "0px", "-webkit-transition": "top 0.5s ease-in-out", "-moz-
transition": "top 0.5s ease-in-out", "-o-transition": "top 0.5s ease-in-out", "-ms-
transition": "top 0.5s ease-in-out", "transition": "top 0.5s ease-in-out"});
}
else
{

clicked=true;
$(".wrapper").css({"top": "100px", "-webkit-transition": "top 0.5s ease-in-out", "-moz-
transition": "top 0.5s ease-in-out", "-o-transition": "top 0.5s ease-in-out", "-ms-
transition": "top 0.5s ease-in-out", "transition": "top 0.5s ease-in-out"});
}

});


var clicked=true;
$(".description-button").on('click', function(){

if(clicked)
{

clicked=false;
$(".wrapper").css({"bottom": "100px", "-webkit-transition": "bottom 0.5s ease-in-out", "-
moz-transition": "bottom 0.5s ease-in-out", "-o-transition": "bottom 0.5s ease-in-out", "-
ms-transition": "bottom 0.5s ease-in-out", "transition": "bottom 0.5s ease-in-out"});

}
else
{

clicked=true;
$(".wrapper").css({"bottom": "0px", "-webkit-transition": "bottom 0.5s ease-in-out", "-    
moz-transition": "bottom 0.5s ease-in-out", "-o-transition": "bottom 0.5s ease-in-out", "-
ms-transition": "bottom 0.5s ease-in-out", "transition": "bottom 0.5s ease-in-out"});
}

});

如果有人能够指出或解释为什么会发生这种情况，我将非常感激。

谢谢！

Answer 1

试试这个DEMO ..工作正常

$(".contact-button").on('click', function(){
   var clicked = $('#cont').attr('data-state');

    if(clicked=='true')
    {
        $('#cont').attr('data-state','false');
        alert($('#cont').attr('data-state'));
        $(".wrapper").css({"top": "100px", "-webkit-transition": "top 0.5s ease-in-out", "-moz-transition": "top 0.5s ease-in-out", "-o-transition": "top 0.5s ease-in-out", "-ms-transition": "top 0.5s ease-in-out", "transition": "top 0.5s ease-in-out"});
    }else if(clicked=='false')
    {
        $('#cont').attr('data-state','true');
          alert($('#cont').attr('data-state'));
         
        $(".wrapper").css({"top": "0px", "-webkit-transition": "top 0.5s ease-in-out", "-moz-transition": "top 0.5s ease-in-out", "-o-transition": "top 0.5s ease-in-out", "-ms-transition": "top 0.5s ease-in-out", "transition": "top 0.5s ease-in-out"});
    }
});



$(".description-button").on('click', function(){
    var clic = $('#des').attr('data-statee');
    if(clic =='true')
    {
          $('#des').attr('data-statee','false');
        alert($('#des').attr('data-statee'));
        $(".wrapper").css({"top": "-100px"});
    }
    if(clic =='false')
    {
        $('#des').attr('data-statee','true');
          alert($('#des').attr('data-statee'));
        $(".wrapper").css({"top": "0px"});
    }
});

为什么单击一个元素来触发事件会阻止另一个元素工作？

1 个答案: