Question

我使用jquery制作simpla下拉菜单，可以悬停，所以任何人都可以帮我调整它以便点击而不是悬停？这是我的fiddle

HTML

<ul class="menu">
  <li>child 1
    <ul class="sub-menu">
      <li>child 1.1
        <ul class="sub-menu">
          <li>child 1.1.1</li>
          <li>child 1.1.2</li>
        </ul>
      </li>
      <li>child 1.2
        <ul class="sub-menu">
          <li>child 1.2.1</li>
          <li>child 1.2.2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>child 2
    <ul class="sub-menu">
      <li>child 2.1</li>
      <li>child 2.2</li>
    </ul>
  </li>
</ul>

CSS

.sub-menu {display: none;}

Jquery的

$("ul.menu").find('> li').hover(
    function() {
        $(this).find('> ul').slideDown();
    },
    function() {
        $(this).find('> ul').hide();
    }
);

$("ul.sub-menu").find('> li').hover(
    function() {
        $(this).find('> ul').slideDown();
    },
    function() {
        $(this).find('> ul').hide();
    }
);

Answer 1

您可以在click（）事件处理程序中使用slideToggle或toggle函数来实现所需的结果

更新您需要在子菜单点击事件中停止事件冒泡，以便它不会调用菜单的点击事件并滑动主菜单

$("ul.menu").find('> li').click(
    function(e) {

        $(this).find('> ul').slideToggle();


      //  $(this).find('> ul').toggle();
    }
);

$("ul.sub-menu").find('> li').click(
    function(e) { 
        e.stopPropagation()

        $(this).find('> ul').slideToggle();

       // $(this).find('> ul').toggle();
    }
);

下面的工作演示

＆＃13;

$("ul.menu").find('> li').click(
    function() {
        $(this).find('> ul').slideToggle();
  

       // $(this).find('> ul').toggle();
    }
);

$("ul.sub-menu").find('> li').click(
    function(e) {
        e.stopPropagation()
        $(this).find('> ul').slideToggle();
   
       // $(this).find('> ul').toggle();
    }
);

＆＃13;

.sub-menu {display: none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
  <li>child 1
    <ul class="sub-menu">
      <li>child 1.1
        <ul class="sub-menu">
          <li>child 1.1.1</li>
          <li>child 1.1.2</li>
        </ul>
      </li>
      <li>child 1.2
        <ul class="sub-menu">
          <li>child 1.2.1</li>
          <li>child 1.2.2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>child 2
    <ul class="sub-menu">
      <li>child 2.1</li>
      <li>child 2.2</li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 2

已修改，只想点击，而不是悬停。谢谢

将.hover替换为.click。

Answer 3

这是我建议您尝试的过程。

使用click功能代替hover功能。
将display: block的超链接添加到主菜单li，以便您可以定位点击父li的点击次数。否则，在子菜单中单击将隐藏子菜单。
将事件处理程序附加到将关闭所有打开菜单的文档正文（$(document).click(...)）。
请务必在点击处理程序中调用event.preventDefault，以便菜单点击不会传播到正文的点击处理程序。
关闭所有打开的菜单，然后再打开用户点击的菜单。

    $(document).click(
      function onClick_body(event) {
        $("ul.menu > li > ul").hide(); // Clicking outside the menu hides the menu.
      }
    );
    $("ul.menu > li > a").click(
      function onClick_menu(event) {
        event.preventDefault(); // Prevents the click from going to the body.
        var $submenu = $(this).sibling("ul"); // Gets the ul next to the hyperlink.
        if (!$submenu.is(":visible")) { // Is this submenu already visible?
          $("ul.menu > li > ul").hide(); // No. Hide other menus.
          $submenu.slideDown(); // Now show this submenu.
        } else
          $submenu.hide(); // Yes. Hide this menu.
      }
    );

Jquery下拉单击（）

3 个答案: