Question

我有一个垂直下拉菜单，我正在使用jQuery切换来打开/关闭子菜单。当用户单击父项时，它工作正常（例如，“关于”子菜单打开，当他们再次单击子菜单时，子菜单再次关闭。但是，如果他们没有再次单击父项（“关于”）关闭它，但点击另一个父项（让我们说'行业'）打开子菜单，子菜单（'关于'和'行业'）都是可见的。因此，当需要点击“行业”时，我需要它才能“关闭”自动关闭。这是代码：

<nav> 
<ul id="nav-list">
    <li class="nav-list_item nav-about><a href="#">About</a>
        <div id="about-drop">
            <ul>
                <li>...</li>
                <li>...</li>
                <li>...</li>
            </ul>
        </div>
    </li>

    <li class="nav-list_item nav-industry"><a href="#">Industry</a>
        <div id="industry-drop">
            <ul>
                <li>...</li>
                <li>...</li>
                <li>...</li>
            </ul>
        </div>
    </li>
    <li class="nav-list_item nav-application"><a href="#">Application</a>
        <div id="application-drop">
            <ul>
                <li>...</li>
                <li>...</li>
                <li>...</li>
            </ul>
        </div>
    </li>
</ul>

JavaScript：

 $('li.nav-about').click(function () {
        $(this).find('ul').toggle();
    });

    $(' li.nav-industry').click(function () {
        $("html, body").animate({ scrollTop: 0 }, "fast");
        $(this).find('ul').toggle();
    });
 $('li.nav-application').click(function () {
        $("html, body").animate({ scrollTop: 0 }, "fast");
        $(this).find('ul').toggle();
    });

我已尝试过在stackoverflow上找到的不同的东西，但无法让它工作。有什么建议吗？

Answer 1

demo

$('li.nav-about').click(function () {
    $(this).find('ul').toggle();
    $(this).siblings('li').find('ul').hide();
});

$(' li.nav-industry').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, "fast");
    $(this).find('ul').toggle();
    $(this).siblings('li').find('ul').hide();
});
$('li.nav-application').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, "fast");
    $(this).find('ul').toggle();
    $(this).siblings('li').find('ul').hide();
});

单击一个时隐藏另一个div。

Answer 2

我认为您可以删除多余的代码：

 $('li.nav-list_item').click(function () {
    $('li.nav-list_item').find('ul').hide();
    $("html, body").animate({ scrollTop: 0 }, "fast");
    $(this).find('ul').toggle();
});

您可以用此替换您的js。

Answer 3

＆＃13;

$('#nav-list li').on('click', function() {
  $('#nav-list li').not(this).find('div').hide();
  $(this).find('div').toggle();
});

＆＃13;

.nav-list_item > div {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-list">
  <li class="nav-list_item nav-about"><a href="#">About</a>
    <div id="about-drop ">
      <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
  </li>

  <li class="nav-list_item nav-industry"><a href="#">Industry</a>
    <div id="industry-drop ">
      <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
  </li>
  <li class="nav-list_item nav-application"><a href="#">Application</a>
    <div id="application-drop ">
      <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
  </li>
</ul>

＆＃13;

不需要那么复杂的处理程序。

当点击事件切换另一个ul时，关闭所有打开的ul

3 个答案: