下拉菜单打不开

Posted 2023-05-09

【中文标题】下拉菜单打不开

【英文标题】：Dropdown menu not opening

【发布时间】：2014-08-27 15:10:59

【问题描述】：

我被我的下拉菜单卡住了。 我希望它在单击导航按钮“点击器”时打开。然后当我再次点击“clicker”时它会关闭。

我希望它仅在单击图像时显示/隐藏。当我点击隐藏的 div 时，它会保持打开状态。

但这不起作用。我不知道为什么。尝试了很多东西。任何想法？ （这里是菜鸟）。

html： （点击“#clicker”图片=切换下拉；“#dropdown-inside”=隐藏的div；

<div class="header_content">
  <div class="navbar">
    <div id="dropdown-menu">
      <img id="clicker" src="http://porschedvd.de/bluptest/typo3/fileadmin/stromer/template/pix/menu_btn.jpg" >
       <ul id="dropdown-inside">

JQuery:

$j('#clicker').click(function() 
$j('#clicker').not(this).children('ul').slideUp("slow");

$j(this).children('ul').slideToggle("slow");
);


$j('#clicker').blur(function() 
$j('#dropdown-inside').hide('slow', function() 
);
);

在这里提琴：http://jsfiddle.net/377G6/2/

【问题讨论】：

#clicker 是一个图像，它是一个不能有子元素的自闭合元素。

@adeneo 在开发 xhtml 文档类型时，您只需关闭 img-element。

@WoIIe - 关不关都无所谓，它是自动关闭，它没有孩子。

jsfiddle.net/377G6/3

你应该使用.next()而不是.children()

【参考方案1】：

我已阅读您的代码并尝试运行它。 现在你有 2 点需要解决：

您的选择器$j(this).children(ul) 找不到该列表。

列表ul是你的#clicker的兄弟元素，所以你可以使用siblings('ul')或next()的方法来选择列表，而不是children()

现在无法触发事件“模糊”。

一般情况下，blur事件只能在input或textarea上触发，所以如果要在<img>或<div>上触发blur，可以设置@987654335这样的属性@给它。

我试过了，修复后运行成功。

这里是链接：http://jsfiddle.net/edisonator/kfcB9/

谢谢， 爱迪生

【讨论】：

你能发同样的 jsfiddle 吗？

@PratikJoshi 我已经添加了它，它是：jsfiddle.net/edisonator/kfcB9 你能原谅我并取消我的投票减少吗？

好的，但请记住，不要在 S.overflow 上发布理论答案，答案对未来的访问者很重要。如果您在紧急编码场景中并且您只看到信息/理论代码，您会喜欢吗？谢谢

行得通！使用我的帖子 cmets 中的解决方案，它运行良好，但在 Safari 浏览器中除外。但是 Edisonator 的代码修复了它。它现在可以在我测试过的所有浏览器和移动设备上运行。