Question

我正在做这个下拉菜单，它通过点击工作并且几乎完成，但我有一个问题，当我点击包含链接的选项之一时，我想要菜单要完全关闭，在我的示例中，带有“您好”的链接是我点击后想要关闭菜单的链接，非常感谢您能帮助我解决我的问题。

 var menu = $('.dropdown li a')    

    $('.dropdown li a').on("click", function(e) {
      e.stopPropagation();
      let current = $(this).next('ul');
      $(this).closest('ul').find('ul').each((index, item) => {
        if($(item)[0] != $(current)[0]) {
          $(item).hide();
        }
      });

      current.toggle(); 
    });

    $(document).on("click", function(e){
      if(!menu.is(e.target) && !menu.has(e.target).length){
        menu.next('ul').hide();
      }
    });

*{margin:0; padding:0; outline:0; box-sizing:border-box;}
    .dropdown{background:#333; display:block; height:28px;}
    .dropdown li{position:relative; float:left; list-style:none; white-space:nowrap; background:#34353a;}
    .dropdown li a{display:block; height:28px; line-height:28px; padding:0 8px; text-decoration:none; color:#ccc;}
    .dropdown ul{position:absolute; display:none;}
    .dropdown li ul ul{left:100%; top:0;}
    .dropdown li ul li{float:none;}
    .dropdown img{margin-right:5px; position:relative; top:2px;}
    .dropdown li:hover{background:#2e4e89;}    
    .dropdown li a:hover{color:#eee;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="dropdown">
    <li><a href="#">Menu 1</a>
      <ul>
        <li><a href="#">Option 1 ></a>
          <ul>
            <li><a href="#">Option 4</a></li>
            <li><a href="#">Option 5 ></a>
              <ul>
                <li><a href="#">Option 7</a></li>
              </ul>
            </li>
            <li><a href="#">Option 6 ></a>
              <ul>
                <li><a href="#">Option 8</a></li>
              </ul>
            </li>
          </ul>
        </li>        
        <li><a href="#">Option 2</a></li>
        <li><a href="#hello">Hello</a></li>
      </ul>
    </li>

    <li><a href="#">Menu 2</a>
      <ul>              
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
      </ul>
    </li>
  </ul>

  <h1 id="hello" style="margin-top:500px; padding:100px;">Hello World!</h1>

Answer 1

使用.next()检查元素是否有以下同级

var menu = $('.dropdown li a')

$('.dropdown li a').on("click", function(e) {
  e.stopPropagation();
  let current = $(this).next('ul');
  $(this).closest('ul').find('ul').each((index, item) => {
    if ($(item)[0] != $(current)[0]) {
      $(item).hide();
    }
  });
  console.log($(this).next().length)
  if ($(this).next().length > 0) {
    current.toggle();
  } else {
    menu.next('ul').hide();
  }
});


$(document).on("click", function(e) {
  if (!menu.is(e.target) && !menu.has(e.target).length) {
    menu.next('ul').hide();
  }
});

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

.dropdown {
  background: #333;
  display: block;
  height: 28px;
}

.dropdown li {
  position: relative;
  float: left;
  list-style: none;
  white-space: nowrap;
  background: #34353a;
}

.dropdown li a {
  display: block;
  height: 28px;
  line-height: 28px;
  padding: 0 8px;
  text-decoration: none;
  color: #ccc;
}

.dropdown ul {
  position: absolute;
  display: none;
}

.dropdown li ul ul {
  left: 100%;
  top: 0;
}

.dropdown li ul li {
  float: none;
}

.dropdown img {
  margin-right: 5px;
  position: relative;
  top: 2px;
}

.dropdown li:hover {
  background: #2e4e89;
}

.dropdown li a:hover {
  color: #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="dropdown">
  <li><a href="#">Menu 1</a>
    <ul>
      <li><a href="#">Option 1 ></a>
        <ul>
          <li><a href="#">Option 4</a></li>
          <li><a href="#">Option 5 ></a>
            <ul>
              <li><a href="#">Option 7</a></li>
            </ul>
          </li>
          <li><a href="#">Option 6 ></a>
            <ul>
              <li><a href="#">Option 8</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Option 2</a></li>
      <li><a href="#hello">Hello</a></li>
    </ul>
  </li>

  <li><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Option 1</a></li>
      <li><a href="#">Option 2</a></li>
    </ul>
  </li>
</ul>

<h1 id="hello" style="margin-top:500px; padding:100px;">Hello World!</h1>

单击链接后关闭下拉菜单

1 个答案: