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

您应该将下拉单击触发器仅绑定到'dropdown-title'。用这个替换所有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>

防止在下拉容器中单击以关闭下拉列表

2 个答案: