Question

我正在为内部系统创建一个故障排除页面，其中一部分是一个带有一些相关问题的明确列表，基本上我已经创建了一些jQuery来推出问题的答案，但是这个仅当您从文本开始单击时才有效，无论您在何处点击<li>，我都希望它弹出。

以前你只能点击文字然后我添加了一个显示：阻止跨度，以便它可以在文本中或文本之后的任何地方拾取，任何想法如何让它选择整个<li>而不是？

提前致谢。

＆＃13;

article {width:760px;margin:0 auto;text-align:center;background-color:#F2F2F2;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;padding:20px;}
article .footer {text-align:left;margin-top:20px;}
article .footer ul {margin:0;padding:0;}
article .footer ul li {list-style-type:none;}
article .footer ul li span, article .footer ul li span:before {display:block;}
article .footer ul li ul li {background-color:#fff;color:#000;padding:10px 15px;font-weight:normal;line-height:18px;letter-spacing:normal;margin-top:7px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;padding:10px;}
.lst {
	border: none;
	font-family: inherit;
	font-size: 14px;
	color: inherit;
	background: none;
	cursor: pointer;
	padding: 25px 80px;
	display: inline-block;
	margin: 5px;
	letter-spacing: 1px;
	outline: none;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	font-weight:bold;
	width:710px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
}

.lst:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

/* List Blue */
.lst-b {background: #727272;color: #fff;}
.lst-b:hover {background: #0066CC;}
.lst-b:active {background: #004c99;	top: 2px;}
.lst-b:before {position: absolute;height: 100%;	left: 0;top: 0;	line-height: 1.8;	font-size: 140%;width: 25px;text-align:center;}

/* List Blue A */
.lst-ba {padding: 10px 10px 10px 33px;}
.lst-ba:before {background: rgba(0,0,0,0.15);}
.icon-go:before {font-family:FontAwesome;font-weight:100;content: "\f059";}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<article><div class="footer">
		<h2>Related issues</h2>
		<ul id="expand">
			<li class="lst lst-b lst-ba icon-go"><span>Lost/forgotten my User ID</span>
				<ul>
					<li>If you have lost your User ID you need to contact your local administrator, this is usually the person who set up your account.  If you don't have a local administrator or don't know who it is please <a href="#">Contact us</a>.</li>
				</ul>
			</li>
			<li class="lst lst-b lst-ba icon-go"><span>I have my User ID but have lost/forgotten my Memorable Data and/or Password</span>
				<ul>
					<li>You can reset your Memorable Data and Password by clicking the "Password Reset" button on the login screen.</li>
				</ul>
			</li>
			<li class="lst lst-b lst-ba icon-go"><span>My account has been deactivated</span>
				<ul>
					<li>If your account has been deactivated then you will need to contact your local administrator, this is usually the person who set up your account.  If you don't have a local administrator or don't know who it is please <a href="#">Contact us</a>.</li>
				</ul>
			</li>
			<li class="lst lst-b lst-ba icon-go"><span>My login attempt has failed</span>
				<ul>
					<li>If your login attempt has failed it could be because you have mistyped your User ID, Memorable Date and/or Password, sometimes it can be a combination of these, we advise you press the "Password Reset" button on the login page.</li>
					<li>If you do not receive an email with new details it could be that your account has been set up under an incorrect email address, if this is the case then please <a href="#">Contact us</a>.</li>
				</ul>
			</li>
		</ul>
	</div>
</article>
<script type="text/javascript">
$(function(){
	$('#expand').find('ul').hide();
	$('#expand').find('span').click(function(e){
    $(this).parent().children('ul').toggle();
});
});
</script>

＆＃13;

Answer 1

尝试改变

$('#expand').find('span').click(function(e){
    $(this).parent().children('ul').toggle();
});

到

$('#expand > li').click(function(e){
    $(this).find('ul').toggle();
});

Answer 2

试试这个：

$('#expand').on('click', 'li', function(e){

jQuery list pop-out，make whole <li> clickable </li>

2 个答案: