Question

这是我的html：

<div ng-attr-id="btnfilter{{user.name}}">
  <span class="spanbutton" style="" id="navbtn" q={{user.name}} onclick="openNav(this)">
    <i class="fa fa-ellipsis-h" style="font-size: 25px;margin-top: 23px;margin-left: -23px;"></i>
  </span>
</div>

这是我的Javascript代码，用于关闭每个弹出窗口：

function openNav(x) {
  var q = $(x).attr('q');

  if ($('#mysidenav' + q).css('display') == 'none') {
    $('#mysidenav' + q).fadeIn('slow');
    $('#btnfilter' + q).html('<span class="spanbutton" id="navbtn" q=' + q + ' style="" onclick="openNav(this)"><i class="fa fa-ellipsis-h" style="font-size: 25px;color:red;margin-top: 23px;margin-left: -23px;"></i></span>');
  } 
  else {
    $('#mysidenav' + q).fadeOut('slow');

    setTimeout(function () {
      $('#mysidenav' + q).css("display", "none");
    }, 1000);

    $('#btnfilter' + q).html('<span class="spanbutton" id="navbtn" q=' + q + ' style="" onclick="openNav(this)"><i class="fa fa-ellipsis-h" style="font-size: 25px ;margin-top: 23px;margin-left: -23px;"></i></span>');
  }
}

我也在使用AngularJS。我有一些动态生成的用户卡。每个按钮都有一个按钮，单击后会打开一个小弹出窗口，当我第二次单击该按钮时，它将关闭弹出窗口。当我单击正文中的任意位置时，我无法弄清楚如何关闭弹出窗口，以使当关闭任何弹出窗口时，关闭按钮的html仍遵循以下html结构：

<span class="spanbutton" id="navbtn" q='+q+' style="" onclick="openNav(this)">
  <i class="fa fa-ellipsis-h" style="font-size: 25px ;margin-top: 23px;margin-left: -23px;"></i>
</span>

如何获取父元素的q属性和btnfilter id等，以便在必须关闭多个open的情况下为上面的代码中提到的封闭弹出窗口创建html。点击任意位置弹出窗口？

到目前为止我尝试获取ID的内容：

    $(document).on('click',function(e) {
  if (!$(e.target).hasClass('fa-ellipsis-h')) {

  $('.spanbutton').each(function(i, obj) {
    var id = $( this ).closest("div").prop("id");
    var q = id.replace('btnfilter','');
    if ( $('#mysidenav'+q).css('display') != 'none' ) {
    $('#mysidenav'+q).fadeOut('slow');
  setTimeout( function(){
    $('#mysidenav'+q).css("display", "none");
    },1000);
    $('#btnfilter'+q).html('<span class="spanbutton" id="navbtn" q='+q+' style="" onclick="openNav(this)"><i class="fa fa-ellipsis-h" style="font-size: 25px ;margin-top: 23px;margin-left: -23px;"></i></span>');
}
}); 
}
});

当我单击正文中除fa-ellipsis-h类的按钮以外的任何地方时，此代码完美地关闭了所有打开的弹出窗口。因此，这将使弹出窗口保持打开状态，直到我单击身体的其他任何位置为止。现在，这非常完美。现在剩下的唯一问题是，如果打开了一个弹出窗口，那么当我打开另一个弹出窗口时，它并没有关闭。关于打开新弹出窗口时如何关闭其他弹出窗口的任何建议？

以下是当前进展的有效信息 https://jsfiddle.net/81upqvb6/2/

通过使用Javascript单击任意位置来关闭具有动态ID的弹出窗口

0 个答案: