Angular Jquery slideToggle / Up弹出窗口

时间:2015-06-03 17:12:27

标签: javascript jquery html angularjs

当绿色弹出窗口打开然后单击蓝色弹出窗口时,它会关闭绿色并打开蓝色弹出窗口。

to give some visuals

链接

      <li><a id="contactBtn" class="active" href="javascript: void(0)" ng-click="showForm()">Kontakt</a></li>
  <li><a id="faceBtn" class="active" href="javascript: void(0)" ng-click="showFace()">Facebook</a></li>

和AngularApp

$scope.showForm = function () {
  $('.contactRow').slideToggle();
};
$scope.closeForm = function () {
  $('.contactRow').slideUp();
};

$scope.showFace = function () {
  $('.facebook').slideToggle();
};
$scope.closeFace = function () {
  $('.facebook').slideUp();
};

我还添加了一些jQuery来制作灯箱效果

      $("#contactBtn, #faceBtn").click(function(){
    $('#overlay').animate({'opacity':'0.7'}, 300, 'linear');
      $('#overlay').css('display','block');
    });

  $('#closeForm, #closeFace').click(function(){
    $('#overlay').animate({'opacity':'0'}, 300, 'linear', function(){
      $('#overlay').css('display','none');
    });
  });

现在有一个很好的方法将这些全部绑定在一起,让我们说你打开绿色(灯箱效果动画)然后你决定点击蓝色它删除绿色窗口和灯箱效果保持和蓝色打开,当你点击蓝色链接再次关闭+(灯箱)。

或者我让事情变得太复杂。

编辑: 新的AngularApp

// onclick event handlers
$scope.showForm = function () {
  $('.contactRow').slideToggle();
    if($(".facebook").is(":visible"))  
  {
    $('.facebook').hide(); 
  }  

};
$scope.closeForm = function () {
  $('.contactRow').slideUp();
};

//FACEBOOK
$scope.showFace = function () {
  $('.facebook').slideToggle();
  if($(".contactRow").is(":visible"))  
  {
    $('.contactRow').hide(); 
  }  
};
$scope.closeFace = function () {
  $('.facebook').slideUp();
};

当你按下facebook链接一旦弹出窗口打开然后再次按下它,但用jquery制作的灯箱效果不会消失,直到我按下X.

1 个答案:

答案 0 :(得分:1)

如果表单可见或不显示,这是除了滑动toogle.check之外的其他方法 试试这样的事情

if($(".contactRow").is(":visible"))  
  {
    $('.contactRow').hide(); 
  }     
else
  {
   $('.facebook').hide(); 
   $('.contactRow').show(); 
  }

你也可以为facebook类做同样的事情。检查它是否可见或不可见,然后采取相应行动..