下拉切换无法正常工作

Question

我正在使用这个 jQuery 进行下拉切换。它仅在启动时工作正常。

我想要做的是，当单击页面正文内的任何位置时，我的下拉菜单应该消失。

我已经申请了下面的jQuery。但它只工作一次。如果我再次点击下拉菜单意味着下拉菜单没有显示......

$(document).ready(function() {
  // Show hide popover
  $(".dropdown").click(function() {
    $(this).find(".dropdown-menu").slideToggle("fast");
  });
});
$(document).on("click", function(event) {
  var $trigger = $(".dropdown");
  if ($trigger !== event.target && !$trigger.has(event.target).length) {
    $(".dropdown-menu").slideUp("fast");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="dropdown">
            <a href="#">Products &#9662;</a>
        </button>
<ul class="dropdown-menu">
  <li><a href="#">Laptops</a></li>
  <li><a href="#">Monitors</a></li>
  <li><a href="#">Printers</a></li>
</ul>

Answer 1

使用此代码 sn-p ??

将方法 find 更改为 next 仅此而已。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  // Show hide popover
  $(".dropdown").click(function() {
    $(this).next(".dropdown-menu").slideToggle("fast");
  });
});
$(document).on("click", function(event) {
  var $trigger = $(".dropdown");
  if ($trigger !== event.target && !$trigger.has(event.target).length) {
    $(".dropdown-menu").slideUp("fast");
  }
});
</script>
<button class="dropdown">
            <a href="#">Products &#9662;</a>
        </button>
<ul class="dropdown-menu">
  <li><a href="#">Laptops</a></li>
  <li><a href="#">Monitors</a></li>
  <li><a href="#">Printers</a></li>
</ul>

Answer 2

我将通过另一种方法 - CSS。通过这种方式，您可以确定它会一直运行。我已根据您的需求编辑了较早的答案/问题。您可以进一步编辑它以符合您的需要。

.wrapper-state {
  display: none;
}

.wrapper-target {
  opacity: 0;
  height: 0;
  font-size: 0;
  transition: 2s ease;
-webkit-transition: width 2s;
}

.wrapper-state~.wrapper-wrap {
  display: none;
}

.wrapper-state:checked~.wrapper-wrap {
  display: block;
}

.wrapper-state:checked~.wrapper-wrap .wrapper-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.wrapper-state~.wrapper-trigger:before {
  content: 'Products \9662;';
}

.wrapper-state:checked~.wrapper-trigger:before {
  content: 'Products \9662;';
}

    .wrap-target ul li {
      display: none;
    }

    .wrap-state:checked~.wrapper-wrap ul li {
      display: block;
    }

.wrapper-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  background-color: #2E181A;
  color: #E6D9BD;
  font-size: .9em;
  line-height: 2;
  border: 1px solid #E6D9BD;
  border-radius: 0.5em;
}

.wrapper-trigger:hover {
  border: 1px solid #2E181A;
  background-color: #E6D9BD;
  opacity: 1;
  color: #2E181A;
}

<input type="checkbox" class="wrapper-state" id="post-wrap" />
   
<label for="post-wrap" class="wrapper-trigger"></label>

<div class="wrapper-wrap">
  <span class="wrapper-target">
    <div class="wrapper-target">
        <ul>
            <li><a href="#">Laptops</a></li>
            <li><a href="#">Monitors</a></li>
            <li><a href="#">Printers</a></li>
        </ul>
     </div>
  </span>
</div>

Answer 3

你可以试试这个例子。我使用慢而不是快来使其更加突出

$(document).ready(function() {
  // Show hide popover
  $(".btn-primary").click(function() {
    $(this).parent().find('.dropdown-menu').slideToggle("slow");
  });
});
$(document).on("click", function(event) {
  var $trigger = $(".dropdown");
  if ($trigger !== event.target && !$trigger.has(event.target).length) {
    $(".dropdown-menu").slideUp("slow");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h2>Dropdown Example</h2>
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data- toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a>
      </li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a>
      </li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About 
       Us</a></li>
    </ul>
  </div>
</div>