Question

我有以下用于下拉菜单的代码，如果菜单栏宽度不足以显示所有项目（取决于屏幕宽度），我将使用此代码将项目放入下拉列表。一切正常，但我想在单击以隐藏下拉菜单时我尝试过。鼠标，但是没有用我希望你能帮帮我一切正常，但我想在单击以隐藏下拉菜单时我尝试过。鼠标，但是没有用代码很大

   <script>
    var $nav = $('.greedy-nav');
    var $btn = $('.greedy-nav button');
     var $vlinks = $('.greedy-nav .visible-links');
    var $hlinks = $('.greedy-nav .hidden-links');
    var breaks = [];
    function updateNav() {
    var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - 
    $btn.width() - 30;
    if($vlinks.width() > availableSpace) {
    breaks.push($vlinks.width());
    $vlinks.children().last().prependTo($hlinks);
    if($btn.hasClass('hidden')) {
    $btn.removeClass('hidden');
 }
  } else {
  if(availableSpace > breaks[breaks.length-1]) {
  $hlinks.children().first().appendTo($vlinks);
  breaks.pop();
  }
 if(breaks.length < 1) {
  $btn.addClass('hidden');
  $hlinks.addClass('hidden');
 }
 }
 $btn.attr("count", breaks.length);
 if($vlinks.width() > availableSpace) {
 updateNav();
}
}
 $(window).resize(function() {
  updateNav();
  });

 $btn.on('click', function() {
 $hlinks.toggleClass("hidden");
  });
  updateNav();
 </script>

HTML

 <div id="shouldPin">
 <div class="ItemListForMenu_shouldPin" id="CategoriesList">
<div class="MenuCategoriesList_categoriesSection">
<nav class='greedy-nav'>
<button id="mybtn">More</button>
<ul id="mainNav" class='visible-links'>
<li><a href='' class="MainCategory">Appetizers</a></li>
<li><a href='' class="MainCategory">Soups</a></li>
<li><a href='' class="MainCategory">Salads</a></li>
<li><a href='' class="MainCategory">Sashimi or Sushi</a></li>
 <li><a href='' class="MainCategory">Appetizers</a></li>
<li><a href='' class="MainCategory">Soups</a></li>
<li><a href='' class="MainCategory">Salads</a></li>
<li><a href='' class="MainCategory">Sashimi or Sushi</a></li>
<li><a href='' class="MainCategory">Appetizers</a></li>
<li><a href='' class="MainCategory">Soups</a></li>
<li><a href='' class="MainCategory">Salads</a></li>
<li><a href='' class="MainCategory">Sashimi or Sushi</a></li>
<li><a href='' class="MainCategory">Appetizers</a></li>
<li><a href='' class="MainCategory">Soups</a></li>
<li><a href='' class="MainCategory">Salads</a></li>
<li><a href='' class="MainCategory">Sashimi or Sushi</a></li>
 </ul>
    <ul id="menu_dropdown" class='hidden-links hidden'></ul>
   </nav>
        </div>
     </div>
    </div>

Answer 1

您可以使用$.contains()来确定一个元素是否在另一个元素内。您需要在整个文档上创建一个点击处理程序，并检查点击target是否在下拉菜单中：

$(document).on('click', function(e) {
    const dropdown = $('.dropdown');
    if(!$.contains(dropdown, e.target) {
        // Close dropdown
        $(dropdown).toggleClass('hidden');
    }
});

要保持应用程序的性能，您只想在打开下拉菜单时将点击事件添加到document ，并在打开{strong>下拉菜单时将点击事件从document中删除。下拉列表已关闭。

编辑：以下是一个有效的代码段，展示了我的建议。您首先检查下拉菜单是否已隐藏，然后检查用户是否单击了下拉菜单中的链接。如果这两个都不成立，则它将隐藏第二个下拉列表。在菜单外单击将关闭第二个下拉菜单：

var $nav = $('.greedy-nav');
var $btn = $('.greedy-nav button');
var $vlinks = $('.greedy-nav .visible-links');
var $hlinks = $('.greedy-nav .hidden-links');
var breaks = [];

function updateNav() {
  var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() -
    $btn.width() - 30;
  if ($vlinks.width() > availableSpace) {
    breaks.push($vlinks.width());
    $vlinks.children().last().prependTo($hlinks);
    if ($btn.hasClass('hidden')) {
      $btn.removeClass('hidden');
    }
  } else {
    if (availableSpace > breaks[breaks.length - 1]) {
      $hlinks.children().first().appendTo($vlinks);
      breaks.pop();
    }
    if (breaks.length < 1) {
      $btn.addClass('hidden');
      $hlinks.addClass('hidden');
    }
  }
  $btn.attr("count", breaks.length);
  if ($vlinks.width() > availableSpace) {
    //updateNav();
  }
}
$(window).resize(function() {
  //updateNav();
});

$btn.on('click', function(e) {
  e.stopPropagation();
  $hlinks.toggleClass("hidden");
});

updateNav();

$(document).on('click', function(e) {
  // Check if the dropdown is already hidden
  // Check if the clicked target exists in the hidden dropdown
  // Check if the clicked target exists in the visible dropdown
  // If none are true, then hide the dropdown
  if (!$($hlinks).hasClass('hidden') &&
    !$.contains($hlinks[0], e.target) &&
    !$.contains($vlinks[0], e.target)) {
    $($hlinks).addClass('hidden');
  }
});

.hidden {
  display: none;
}

.visible-links {
  background: #ededed;
}

.hidden-links {
  background: #222;
}

.hidden-links a {
  color: #FFF;
}

#shouldPin {
  padding-bottom: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="shouldPin">
  <div class="ItemListForMenu_shouldPin" id="CategoriesList">
    <div class="MenuCategoriesList_categoriesSection">
      <nav class='greedy-nav'>
        <button id="mybtn">More</button>
        <ul id="mainNav" class='visible-links'>
          <li>Appetizers</li>
          <li><a href='' class="MainCategory">Soups</a></li>
          <li><a href='' class="MainCategory">Salads</a></li>
          <li><a href='' class="MainCategory">Sashimi or Sushi</a></li>
          <li><a href='' class="MainCategory">Appetizers</a></li>
          <li><a href='' class="MainCategory">Soups</a></li>
          <li><a href='' class="MainCategory">Salads</a></li>
          <li><a href='' class="MainCategory">Sashimi or Sushi</a></li>
          <li><a href='' class="MainCategory">Appetizers</a></li>
          <li><a href='' class="MainCategory">Soups</a></li>
          <li><a href='' class="MainCategory">Salads</a></li>
          <li><a href='' class="MainCategory">Sashimi or Sushi</a></li>
          <li><a href='' class="MainCategory">Appetizers</a></li>
          <li><a href='' class="MainCategory">Soups</a></li>
          <li><a href='' class="MainCategory">Salads</a></li>
          <li><a href='' class="MainCategory">Sashimi or Sushi</a></li>
        </ul>
        <ul id="menu_dropdown" class='hidden-links hidden'></ul>
      </nav>
    </div>
  </div>
</div>

在屏幕的任何位置单击时如何隐藏下拉菜单

1 个答案: