隐藏在父元素中的弹出窗口

Question

我创建了一些li，并且每个人都有自己的弹出窗口。点击每个链接时，相应的弹出窗口将打开。滚动弹出窗口时会隐藏（需要我完成）。我将400px的高度设置为ul，因为它对我的网站来说是强制性的。最后一个李的弹出窗口正在隐藏。你能说一下如何在顶部显示可见li的最后一个弹出窗口（同时滚动li更改）而不使用CSS隐藏它。 jsfiddle：http://jsfiddle.net/hLy3xc6k/

＆＃13;

＆＃13;

$(document).ready(function(){
	$('ul li a').click(function(){
		if($('p').is(':visible')) {
			$('p').fadeOut();
			$(this).parent().find('p').fadeToggle();
		}
		else
		{
		$(this).parent().find('p').fadeToggle();
		
		}
	});
	$('ul').scroll(function(){
		$('p').hide();
	});
});

＆＃13;

* {padding:0; margin:0;}
ul {height:400px; overflow:auto; border:2px solid #aaa;}
ul li {list-style:none; padding:10px; border-bottom: 1px solid #ccc; }
ul li a {position:relative;}
ul li p {display:none; width: 100px; position: absolute; right: 0; background: #fff; padding: 5px; border-radius: 3px; border: 1px solid #ccc; z-index: 9;}

＆＃13;

<div class="wrapper">
	<ul>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
		<li> Hello World <a href="javascript:void(0)"> Popup  <p> New popup screen to check </p> </a></li>
	</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 1

.wrapper ul li:last-child p{
   bottom: 22px;
 }

试试这个。

http://jsfiddle.net/hLy3xc6k/2/