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

您可以尝试以下示例。我使用慢速而不是快速使它更加突出

// Store
localStorage.setItem("key", "value");
// Retrieve
value = localStorage.getItem("key");

$(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");
  }
});

Answer 2

使用此代码段

更改方法查找到下一步。

<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 3

我将通过另一种方法-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>

下拉开关无法正常工作

3 个答案: