Javascript 如何让下拉菜单在单击时打开/关闭而不是悬停？

我对javascript和ajax/jquery非常陌生，并且一直在尝试获取一个脚本，以便在单击鼠标而不是鼠标悬停时打开和关闭下拉菜单

有问题的菜单位于上，是标题下方右侧的黑色菜单。我希望它能像下面的另一个菜单一样打开和关闭，它是浅灰色的，在选择分割模块中

灰色菜单是菜单的一部分，而语言菜单不是

我还有一个jquery导入，可以在上面链接的视图源中找到

我的Javascript代码：

我的HTML：

谢谢

搜索此$lang选择器li.hover并替换为

$("#lang-selector li").click

---

.hover、.click、.something都是触发器，查看此链接：

了解有关Jquery中事件的更多信息

Ps:sushil bharwani投票吧，是的，只需更改你的。鼠标悬停在。单击

 $(function() {
     $("#lang-selector li:first").click(function(){
         $('ul:first',this).toggle();
     })
 });

---

使用切换需要您单击打开，然后重新单击关闭

我会这样做

$(function() {
 $("#lang-selector > li").click(function() {
     $('ul:first',this).toggleClass('active');
 });
});

 $(function() {
  $("#lang-selector li ul").addClass("hidden");
  $("#lang-selector li").click(function(e) {
      e.preventDefault();
      $('ul:first',$(this)).toggleClass('hidden active');
    });
 });

然后，在CSS中添加以下内容：

.active { display: block; }

>

同时确保副导航显示：无；默认情况下，在CSS中

这将使得在lang selector中单击标记，而不是在任何子导航标记中单击标记，将打开或关闭子导航，具体取决于子导航的当前状态

如果您担心子导航上默认显示：无的可访问性，您可以这样做

$(function() {
 $("#lang-selector > li").click(function() {
     $('ul:first',this).toggleClass('active');
 });
});

 $(function() {
  $("#lang-selector li ul").addClass("hidden");
  $("#lang-selector li").click(function(e) {
      e.preventDefault();
      $('ul:first',$(this)).toggleClass('hidden active');
    });
 });

>

然后将其添加到CSS中

.hidden { display: none; }

在这个场景中，默认情况下显示，然后当文档加载时，jQuery将隐藏类添加到所有类中以隐藏它们，然后单击它将切换隐藏类和活动类，显示或隐藏它们

---

您还需要删除当前显示：CSS中的语言选择器ul ul ul ul中的none，否则它将优先于隐藏/活动类。

如果您需要两个函数用于单击事件，请尝试。toggle

我用这个：

$('.triggerlist').toggle(function(e) {
        e.preventDefault();
  $(this).find('ul').fadeIn();
    },function() {
  $(this).find('ul').fadeOut();
    });

---

这使我能够对这两个函数做更多的工作，而不仅仅是。单击它的1个函数。

好的，欢迎。重要的一点是，这不是Java，而是JavaScript。除了一些小的语法相似性和名称之外，它们并不相同，事实上也有很大的不同。我已经尝试过了，虽然它可以打开，但在打开下拉列表后，您无法关闭它。你必须刷新页面以摆脱下拉列表。这不起作用，因为hover接受两个函数，而click只接受一个。不，更改它不起作用，hover接受两个函数，而click只接受一个。正如RobertPitt所说，使用切换处理程序！使用“单击”，用户必须单击才能打开，必须单击才能关闭。。。这与悬停的方式不同…似乎无法让这两种方法中的任何一种在单击时显示菜单。好吧，你不能只是复制和粘贴这个，你还必须修改你自己的代码。。。这里有一个链接显示它的工作原理。我现在明白了。我还不知道javascript或jQuery，因为这是我第一次在网站上使用它。当我昨天尝试这个方法时，它甚至不会显示黑暗的图像来点击。到目前为止，它工作得非常好。非常感谢！当我昨晚在您最初发布它之后尝试它时，我无法让它工作。很高兴它帮助了您，请记住jQuery文档非常简单，您也总能在那里找到好的答案。

$('.triggerlist').toggle(function(e) {
        e.preventDefault();
  $(this).find('ul').fadeIn();
    },function() {
  $(this).find('ul').fadeOut();
    });