防止单击下拉容器以关闭下拉菜单

Question

我需要制作在同一页面中有多个实例的单一类型的下拉列表（所以是同一个类）。每个都必须正常工作，点击展开内容，点击内部内容保持显示（包括登录/注册表单，下拉菜单，复选框等甚至空白区域），点击下拉列表之外 - 如果我点击关闭它并关闭它它的标题或其他下拉菜单。 我设法完成了我需要的大部分工作，除了当我使用复选框或输入字段时它会关闭 - 下拉内容内的任何点击都会关闭它。我看到我必须使用 e.preventDefault();但是当我尝试时，它阻止了下拉菜单打开。

我制作了一个 jsfiddle，所以你可以看到它并告诉我我做错了什么或错过了什么。

$(".dropdown").click(function(event) {
  event.stopPropagation();
  $(this).parent().find(".dropdown").not(this).find(".dropdown-values").slideUp();
  $(this).find(".dropdown-values").slideToggle();
});
$(document).click(function(event) {
  $(".dropdown-values").slideUp();
});

.dropdown-container {
  background: #ddd;
}

.dropdown {
  background: #313654;
  display: inline-block;
  border-left: 1px solid #000;
  border-right: 1px solid #3f4c6b;
  position: relative;
  cursor: pointer;
}

.dropdown:hover {
  background: blue;
  color: white;
}

.dropdown-title {
  display: block;
  padding: 5px 10px 5px 10px;
  font-size: 13px;
  font-weight: bold;
  color: #FFF;
}

.dropdown-values {
  position: absolute;
  left: 0px;
  top: 100%;
  background: #3f4c6b;
  padding: 15px;
  display: none;
}

.dropdown-values a:HOVER {
  background: #dedede;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="dropdown-container">
  <div class="dropdown">
    <a class="dropdown-title">Login</a>
    <div class="dropdown-values">
      <a class="dropdown-link" href="/test1">MY STORY</a>
      <a class="dropdown-link" href="/test2">MY STYLE</a>
      <a class="dropdown-link" href="/test3">MY STYLE X</a>
      <a class="dropdown-link" href="/test4">MY STYLE Y</a>
      <form method="post" action="index.html">
        <p>
          <input type="text" name="login" value="" placeholder="Username or Email">
        </p>
        <p>
          <input type="password" name="password" value="" placeholder="Password">
        </p>
        <p class="remember_me">
          <label>
            <input type="checkbox" name="remember_me" id="remember_me"> Remember me on this computer
          </label>
        </p>
        <p class="submit">
          <input type="submit" name="commit" value="Login">
        </p>
      </form>
    </div>
  </div>
  <div class="dropdown">
    <a class="dropdown-title">Register</a>
    <div class="dropdown-values">
      <div class="dropdown-value">
        <a class="dropdown-value" href="/test5">MY PRICING</a>
      </div>
      <div class="">
        <a class="dropdown-value" href="/test6">SERVICES</a>
      </div>
    </div>
  </div>
</div>

Answer 1

您应该只将下拉点击触发器绑定到“下拉标题”。用这个替换所有的JS部分：

$(".dropdown-title").click(function(event) {
  $(this).siblings(".dropdown-values").slideToggle();
});
$(".dropdown").mouseleave(function(event) {
  $(".dropdown-values").slideToggle();
});

Answer 2

这是可行的解决方案 - 我在下拉列表中添加了其他表单。

  $(".dropdown").click(function(event) {
  event.stopPropagation();
  $(this).parent().find(".dropdown").not(this).find(".dropdown-values").fadeOut(500);
  $(this).parent().find(".dropdown").not(this).find(".dropdown-title").removeClass("activated");
});
$(document).click(function(event) {
  $(".dropdown-values").fadeOut(500);
  $(".dropdown-title").removeClass("activated");
});
$(".dropdown-title").click(function(event) {
  $(this).siblings(".dropdown-values").fadeToggle(500);
  $(this).parents(".dropdown").find('.dropdown-title').toggleClass("activated");
});

 .activated {
   background: red;
 }
.dropdown-container {
  background: #ddd;
}
.dropdown {
  background: #313654;
  display: inline-block;
  border-left: 1px solid #000;
  border-right: 1px solid #3f4c6b;
  position: relative;
  cursor: pointer;
}
.dropdown:hover {
  background: blue;
  color: white;
}
.dropdown-title {
  display: block;
  padding: 5px 10px 5px 10px;
  font-size: 13px;
  font-weight: bold;
  color: #FFF;
}
.dropdown-values {
  position: absolute;
  left: 0px;
  top: 100%;
  background: #3f4c6b;
  padding: 15px;
  display: none;
}
.dropdown-values a {
  display: block;
}
.dropdown-values a:HOVER {
  background: #dedede;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="dropdown-container">
  <div class="dropdown">
    <a class="dropdown-title">ABOUT</a>
    <div class="dropdown-values">
      <select name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
      </select>
      <form>
        <input type="radio" name="gender" value="male" checked>Male
        <br>
        <input type="radio" name="gender" value="female">Female
        <br>
        <input type="radio" name="gender" value="other">Other
      </form>
      <a class="dropdown-link" href="/test1">MY STORY</a>
      <a class="dropdown-link" href="/test2">MY STYLE</a>
      <a class="dropdown-link" href="/test3">MY STYLE X</a>
      <a class="dropdown-link" href="/test4">MY STYLE Y</a>
      <form method="post" action="index.html">
        <p>
          <input type="text" name="login" value="" placeholder="Username or Email">
        </p>
        <p>
          <input type="password" name="password" value="" placeholder="Password">
        </p>
        <p class="remember_me">
          <label>
            <input type="checkbox" name="remember_me" id="remember_me">Remember me on this computer
          </label>
        </p>
        <p class="submit">
          <input type="submit" name="commit" value="Login">
        </p>
      </form>
    </div>
  </div>
  <div class="dropdown">
    <a class="dropdown-title">SERVICE</a>
    <div class="dropdown-values">
      <div class="dropdown-value">
        <a class="dropdown-value" href="/test5">MY PRICING</a>
      </div>
      <div class="">
        <a class="dropdown-value" href="/test6">SERVICES</a>
      </div>
    </div>
  </div>
</div>