如何使用jquery显示鼠标点击列表？ [英] How to show a list on mouse click using jquery?
本文介绍了如何使用jquery显示鼠标点击列表？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用以下代码：
< html>
< head>
< script type =text / javascriptsrc =jquery-1.7.js>< / script>
< script language =JavaScript>
$（document）.ready（function（）{
$（'＃cssdropdown li.headlink'）。hover（
function（）{$（'ul'，this）.css （'display'，'block'）;}，
function（）{$（'ul'，this）.css（'display'，'none'）;}）;
}）;
< / script>
< / head>
< body>
< ul id =cssdropdown>
< li class =headlink>
< a href =http://google.com/>搜索引擎< / a>
< ul>
< li>< a href =http://google.com/> Google< / a>< / li>
< li>< a href =http://yahoo.com/> Yahoo< / a>< / li>
< li>< a href =http://live.com/> Live Search< / a>< / li>
< / ul>
< / li>
< li class =headlink>
< a href =http://shopping.com>购物< / a>
< ul>
< li>< a href =http://amazon.com/>亚马逊< / a>< / li>
< li>< a href =http://ebay.com/> eBay< / a>< / li>
< li>< a href =http://craigslist.com/> CraigsList< / a>< / li>
< / ul>
< / li>
< / ul>
< / body>
< / html>
我可以在鼠标上显示一个列表。
我想在鼠标点击时显示列表。
例如，如果我点击搜索引擎，则 Google，Yahoo和Live Search列表将发生变化。
解决方案
试试这个：
$（UL UL）。css（display，none）;
$（。title）。click（function（e）{
e.preventDefault（）;
$（this）.next（UL）。toggle （）;
}）;
我添加了一个 title的类到每个可点击的项目，以便代码可以重复使用。
With the following code:
<html>
<head>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script language="JavaScript">
$(document).ready(function(){
$('#cssdropdown li.headlink').hover(
function() { $('ul', this).css('display', 'block'); },
function() { $('ul', this).css('display', 'none'); });
});
</script>
</head>
<body>
<ul id="cssdropdown">
<li class="headlink">
<a href="http://google.com/">Search Engines</a>
<ul>
<li><a href="http://google.com/">Google</a></li>
<li><a href="http://yahoo.com/">Yahoo</a></li>
<li><a href="http://live.com/">Live Search</a></li>
</ul>
</li>
<li class="headlink">
<a href="http://shopping.com">Shopping</a>
<ul>
<li><a href="http://amazon.com/">Amazon</a></li>
<li><a href="http://ebay.com/">eBay</a></li>
<li><a href="http://craigslist.com/">CraigsList</a></li>
</ul>
</li>
</ul>
</body>
</html>
I can show a list on mouse over.
I want to show the lists on mouse click instead.
For instance, if I click on Search Engines, the Google, Yahoo and Live Search list will happear.
解决方案
Try this:
$("UL UL").css("display", "none");
$(".title").click(function(e) {
e.preventDefault();
$(this).next("UL").toggle();
});
I've added a class of title to each of your clickable items so that the code can be reused.
这篇关于如何使用jquery显示鼠标点击列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
