Javascript 如何使用jquery在鼠标单击时显示列表？_Javascript_Jquery_Html

Javascript 如何使用jquery在鼠标单击时显示列表？

javascript jquery html

Javascript 如何使用jquery在鼠标单击时显示列表？,javascript,jquery,html,Javascript,Jquery,Html,使用以下代码： <html> <head> <script type="text/javascript" src="jquery-1.7.js"></script> <script language="JavaScript"> $(document).ready(function(){ $('#cssdropdown li.headlink').hover(

使用以下代码：

<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>


$（文档）.ready（函数（）{
$（'cssdropdownli.headlink'）。悬停(
函数（）{$（'ul'，this）.css（'display'，'block'）；}，
函数（）{$（'ul'，this.css（'display'，'none'）；}）；
});

我可以在鼠标上方显示列表

我想用鼠标点击来显示列表。

例如，如果我点击

搜索引擎

，就会出现

谷歌、雅虎和Live搜索列表

。

只需给

标记一个id，并为此创建一个事件。如下：

$（'#搜索引擎'）。单击（函数（）{}）
尝试以下操作：
$("UL UL").css("display", "none");

$(".title").click(function(e) {
    e.preventDefault();
   $(this).next("UL").toggle();
});

我为每个可点击的项目添加了一类标题
，这样代码就可以重复使用
这将给出您想要的行为，任何打开的列表都将被隐藏，相应的列表将被打开：
  $('li.headlink ul').hide();

  $('li.headlink > a').click(function(e) {
     e.preventDefault();
     $('li.headlink ul').hide();
     $(this).next().show();
  });

或者使用切换方法关闭所有列表：
$('li.headlink ul').hide();

$('li.headlink > a').click(function(e) {
      e.preventDefault();
      var thisList = $(this).next();
      thisList .toggle();
      $('li.headlink ul').not(thisList).hide();
});

下面是第二种方法有效的演示
谢谢Rory，就是这样。当我打开第一个列表时，有可能缩小另一个列表（如果打开的话）吗？哼，但是当我打开第一个列表时，有可能缩小第二个列表（如果打开的话）（反之亦然）？@aF.你的意思是什么？@Fatal omg，很漂亮，这正是我要找的：）@aF.很乐意帮忙，听起来你想要这样的东西