javascript - 下拉菜单打不开

Question

我被下拉菜单卡住了。我希望它在我单击导航按钮“clicker”时打开。然后当我再次点击“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" alt="">
       <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() {
});
});

在这里 fiddle :http://jsfiddle.net/377G6/2/

Answer 1

我已经阅读了您的代码并尝试运行它。现在您有 2 点需要修复:

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

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

2. 现在无法触发事件“blur”。

   一般情况下，事件 blur只能在 input 上触发或 textarea , 所以如果你想触发 blur在 <img>或 <div> ，您可以设置一个属性，如 tabindex="-1"给它。

正如我所尝试的，它在修复后成功运行。

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

谢谢，爱迪生