文章/答案/技术大牛

发布

问Jquery多重切换
EN

Stack Overflow用户

提问于 2017-07-25 18:24:54

回答 4查看 39关注 0票数 0

我使用下面的代码创建弹出框

$(document).ready(function() {
  $('.item-link').click(function(e){
    e.preventDefault();
    var id = $(this).attr('id');
    $('#pop-up-' + id).fadeToggle();
  });
});

.pop-up{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="1" class="item-link">
Link 1
</a>
<a href="#" id="2" class="item-link">
Link 2
</a>
<a href="#" id="3" class="item-link">
Link 3
</a>
<a href="#" id="4" class="item-link">
Link 4
</a>

<div class="pop-up" id="pop-up-1">
Content 1
</div>
<div class="pop-up" id="pop-up-2">
Content 2
</div>
<div class="pop-up" id="pop-up-3">
Content 3
</div>
<div class="pop-up" id="pop-up-4">
Content 4
</div>

它工作良好，但我想关闭弹出时，另一个链接是点击或点击任何其他地方的网页。我对jquery没那么在行

jquery

javascript

回答 4

Stack Overflow用户

回答已采纳

发布于 2017-07-25 18:40:55

若要在用户单击页面上任何位置时关闭任何弹出窗口，您需要在比链接本身更高的级别捕获单击事件，该链接依赖于从原始目标到document或window的“冒泡”事件。这样，您就可以对文档中任何地方发生的单击作出反应。

此外，当您没有实际导航到任何地方时，不要使用<a>元素。几乎任何元素都可以被赋予一个click事件处理程序，所以请为您的内容使用最好的元素。另外的好处是，您不必取消(使用e.preventDefault())单击的本机行为，比如span (与a一样)，因为span没有本机单击行为。

最后，作为最佳实践，您不应该给元素以数字开头的id值。

来自MDN

注意:除ASCII字母、数字、'_‘、'-’和‘’。可能会导致兼容性问题，因为在HTML 4中是不允许的。虽然在HTML 5中取消了这个限制，但是ID应该以字母开头以保证兼容性。

见下文的评论：

$(document).ready(function() {

  // Catch all clicks, no matter where they originated
  $(document).on("click", function(e){
    
    $(".pop-up").hide("slow");  // Hide all the pop ups
  
    // Show just the one that was requested. The event target (e.target here)
    // represents the actual object that the event originated from.
    $("#pop-up-" + e.target.id).show("slow");
  
  });

});

/* Make the span elements look/feel like links: */
.item-link {
  cursor:pointer;
  text-decoration:underline;
  color:blue;
}

.pop-up{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="a" class="item-link">Link 1</span> |
<span id="b" class="item-link">Link 2</span> |
<span id="c" class="item-link">Link 3</span> |
<span id="d" class="item-link">Link 4</span>

<div class="pop-up" id="pop-up-a">Content 1</div>
<div class="pop-up" id="pop-up-b">Content 2</div>
<div class="pop-up" id="pop-up-c">Content 3</div>
<div class="pop-up" id="pop-up-d">Content 4</div>

票数 0

Stack Overflow用户

发布于 2017-07-25 18:43:48

    function fn_click(obj){
      $(obj).click(function(e){
        e.preventDefault();
        var id = $(this).attr('id');
        $('#pop-up-' + id).fadeToggle();
      });
    }

    function fn_blur(obj){
       $('.item-link').on('blur',function(e){
          $('.item-link').hide();
        
       });
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
		<a href="#" id="1" onClick="fn_click(this);" onBlur="fn_blur(this);" class="item-link">
		Link 1
		</a>
		<a href="#" id="2" onClick="fn_click(this);" onBlur="fn_blur(this);" class="item-link">
		Link 2
		</a>
		<a href="#" id="3" onClick="fn_click(this);" onBlur="fn_blur(this);" class="item-link">
		Link 3
		</a>
		<a href="#" id="4" onClick="fn_click(this);" onBlur="fn_blur(this);" class="item-link">
		Link 4
		</a>

		<div class="pop-up" id="pop-up-1">
		Content 1
		</div>
		<div class="pop-up" id="pop-up-2">
		Content 2
		</div>
		<div class="pop-up" id="pop-up-3">
		Content 3
		</div>
		<div class="pop-up" id="pop-up-4">
		Content 4
		</div>

票数 0

Stack Overflow用户

发布于 2017-07-25 18:37:55

您可以在您的$('.pop-up').not('#pop-up-' + id).hide()之上添加fadeToggle()，这将在打开一个新的之前关闭其他的，而如果再次单击当前的一个，它仍然会逐渐消失。

$(document).ready(function() {
  $('.item-link').click(function(e){
    e.preventDefault();
    e.stopImmediatePropagation();
    var id = $(this).attr('id');
    $('.pop-up').not('#pop-up-' + id).hide();
    $('#pop-up-' + id).fadeToggle();
  });

$(document).click(function(e){
    if(!$(e.target).is('.pop-up')) {
        if($('.pop-up').is(':visible')) {
            $('.pop-up').fadeOut();
        }
    }
})
});

.pop-up{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="1" class="item-link">
Link 1
</a>
<a href="#" id="2" class="item-link">
Link 2
</a>
<a href="#" id="3" class="item-link">
Link 3
</a>
<a href="#" id="4" class="item-link">
Link 4
</a>

<div class="pop-up" id="pop-up-1">
Content 1
</div>
<div class="pop-up" id="pop-up-2">
Content 2
</div>
<div class="pop-up" id="pop-up-3">
Content 3
</div>
<div class="pop-up" id="pop-up-4">
Content 4
</div>

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45310981

复制

相似问题

问Jquery多重切换
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery多重切换EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery多重切换
EN