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

Question

我目前有一个类似于以下 jsfiddle 的设置。我不太擅长 javascript，所以我设法将一些代码放在一起，告诉一个按钮将“包装器”从顶部向下滑动，另一个按钮将包装器从底部向上滑动。

就目前情况而言，如果您先点击“描述按钮”，此事件就可以正常工作。只要您点击“联系按钮”，然后点击“描述按钮”，“描述按钮”就不再有效。

如果您在加载后首先直接点击“联系按钮”，然后再点击“描述按钮”，同样的事情也适用——它不再有效。

DEMO

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"});
    }
});