0

希望有人能给我一些提示！

我尝试构建一个下拉过滤器 - 如果选择了过滤器中的一个项目，它应该在“过滤器”-ToggleButton 旁边可见 - 就像关闭状态一样。

但是，如果我将鼠标悬停在打开/关闭链接上，“选定项目”会跳到底部——我知道为什么但我该如何防止这种情况——“选定项目”如何保持在过滤器按钮旁边？

JSBin - 示例：http:
//jsbin.com/lucayaqeno/

<section class="filter dropdown">
    <nav class="container">
        <ul>
            <li>
                <a href="#" class="toggle" data-dropdown="dropdown1">Filter >
                        <span class="icon-chevron-right"><!-- --></span></a>
                <form enctype="multipart/form-data" id="" method="post" action="" class="">
                    <div class="col-sm-6">
                        <h3>Channels</h3>
                        <ul class="row" role="menu">
                            <li>
                                <input type="checkbox" value="1" class="checkbox-widget list-field" name="channel:list" id="channel-1">
                                <label for="channel-1"><span class="label">Channel 1</span></label>
                            </li>
                            <li>
                                <input type="checkbox" value="2" class="checkbox-widget list-field" name="channel:list" id="channel-2">
                                <label for="channel-2"><span class="label">Channel 2</span></label>
                            </li>
                            <li>
                                <input type="checkbox" value="3" class="checkbox-widget list-field" name="channel:list" id="channel-3">
                                <label for="channel-3"><span class="label">Channel 3</span></label>
                            </li>
                        </ul>
                    </div>
                </form>
            </li>
            <li>
                <a href="">selected Filter</a>
            </li>
            <li>
                <a href="">selected Filter</a>
            </li>
        </ul>
    </nav>
</section>
<p>this content should be always visible - move/jump down</p>

如果有人对标记有更好的想法

谢谢你的帮助！

4

3 回答 3

1 

body {
  background-color: white;
}

.filter {
  background-color: #19679e;
  font-size: 16px;
  position: relative;
  display: block;
}

.filter a,
.filter label {
  color: #FFFFFF;
  cursor: pointer;
}

.filter ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.filter.dropdown form {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  background-color: #19679e;
}

.filter.dropdown nav > ul > li {
  display: inline-block;
}

.filter.dropdown nav > ul > li:first-child:hover form,
.filter.dropdown nav > ul > li:first-child a:hover form,
.filter.dropdown nav > ul > li:first-child > a:focus + form {
  visibility: visible;
  opacity: 1;
}

.filter.dropdown nav > ul > li:first-child a {
  padding: 15px;
  display: inline-block;
  background-color: #4785b1;
}
<section class="filter dropdown">
  <nav class="container">
    <ul>
      <li>
        <a href="#" class="toggle" data-dropdown="dropdown1">Filter >
          <span class="icon-chevron-right"><!-- --></span></a>
        <form enctype="multipart/form-data" id="" method="post" action="" class="">
          <div class="col-sm-6">
            <h3>Channels</h3>
            <ul class="row" role="menu">
              <li>
                <input type="checkbox" value="1" class="checkbox-widget list-field" name="channel:list" id="channel-1">
                <label for="channel-1"><span class="label">Channel 1</span></label>
              </li>
              <li>
                <input type="checkbox" value="2" class="checkbox-widget list-field" name="channel:list" id="channel-2">
                <label for="channel-2"><span class="label">Channel 2</span></label>
              </li>
              <li>
                <input type="checkbox" value="3" class="checkbox-widget list-field" name="channel:list" id="channel-3">
                <label for="channel-3"><span class="label">Channel 3</span></label>
              </li>
            </ul>
          </div>
          <div class="col-sm-6">
            <h3>Categories</h3>
            <ul class="row" role="menu">
              <li>
                <input type="checkbox" value="1" class="checkbox-widget list-field" name="category:list"
                       id="category-1">
                <label for="category-1"><span class="label">Category One</span></label>
              </li>
              <li>
                <input type="checkbox" value="2" class="checkbox-widget list-field" name="category:list"
                       id="category-2">
                <label for="category-2"><span class="label">Category Two</span></label>
              </li>
              <li>
                <input type="checkbox" value="3" class="checkbox-widget list-field" name="category:list"
                       id="category-3">
                <label for="category-3"><span class="label">Category Three</span></label>
              </li>
              <li>
                <input type="checkbox" value=4" class="checkbox-widget list-field" name="category:list" id="category-4">
                <label for="category-4"><span class="label">Category Four</span></label>
              </li>
            </ul>
          </div>
          <hr>
          <div class="formControls row">
            <div class="col-sm-8 pull-right smallhi text-right">
              <small><a href="#">Reset</a></small>
              <button class="btn-slash transparent inverted" name="form.buttons.send" type="submit">
                <span class="icon"></span> Send
              </button>
            </div>
          </div>
        </form>
      </li>
      <li>
        <a href="">selected Filter</a>
      </li>
      <li>
        <a href="">selected Filter</a>
      </li>
    </ul>
  </nav>
</section>

于 2017-06-26T14:48:32.857 回答
0 

body {
  background-color: white;
}

.filter {
  background-color: #19679e;
  font-size: 16px;
  position: relative;
  display: block;
}

.filter a,
.filter label {
  color: #FFFFFF;
  cursor: pointer;
}

.filter ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.filter.dropdown form {
  display: none;
}

.filter.dropdown .selected {
  display: inline-block;
}

.filter.dropdown .selected > li {
  display: inline-block;
}

.filter.dropdown nav > ul > li:first-child:hover form,
.filter.dropdown nav > ul > li:first-child a:hover form,
.filter.dropdown nav > ul > li:first-child > a:focus + form {
  display: block;
}

.filter.dropdown nav > ul > li:first-child > a {
  padding: 15px;
  display: inline-block;
  background-color: #4785b1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="filter dropdown">
    <nav class="container">
        <ul>
            <li>
                <a href="#" class="toggle" data-dropdown="dropdown1">Filter >
                    <span class="icon-chevron-right"><!-- --></span></a>
                <ul class="selected">
                    <li><a href="">selected Filter</a></li>
                    <li><a href="">selected Filter</a></li>
                </ul>
                <form enctype="multipart/form-data" id="" method="post" action="" class="row">
                    <div class="col-sm-6">
                        <h3>Channels</h3>
                        <ul class="row" role="menu">
                            <li>
                                <input type="checkbox" value="1" class="checkbox-widget list-field" name="channel:list"
                                       id="channel-1">
                                <label for="channel-1"><span class="label">Channel 1</span></label>
                            </li>
                            <li>
                                <input type="checkbox" value="2" class="checkbox-widget list-field" name="channel:list"
                                       id="channel-2">
                                <label for="channel-2"><span class="label">Channel 2</span></label>
                            </li>
                            <li>
                                <input type="checkbox" value="3" class="checkbox-widget list-field" name="channel:list"
                                       id="channel-3">
                                <label for="channel-3"><span class="label">Channel 3</span></label>
                            </li>
                        </ul>
                    </div>
                    <div class="col-sm-6">
                        <h3>Categories</h3>
                        <ul class="row" role="menu">
                            <li>
                                <input type="checkbox" value="1" class="checkbox-widget list-field" name="category:list"
                                       id="category-1">
                                <label for="category-1"><span class="label">Category One</span></label>
                            </li>
                            <li>
                                <input type="checkbox" value="2" class="checkbox-widget list-field" name="category:list"
                                       id="category-2">
                                <label for="category-2"><span class="label">Category Two</span></label>
                            </li>
                            <li>
                                <input type="checkbox" value="3" class="checkbox-widget list-field" name="category:list"
                                       id="category-3">
                                <label for="category-3"><span class="label">Category Three</span></label>
                            </li>
                            <li>
                                <input type="checkbox" value=4" class="checkbox-widget list-field" name="category:list"
                                       id="category-4">
                                <label for="category-4"><span class="label">Category Four</span></label>
                            </li>
                        </ul>
                    </div>
                    <div class="col-sm-offset-6 col-sm-6">
                        <small><a href="#">Reset</a></small>
                        <button class="btn-slash transparent inverted" name="form.buttons.send" type="submit">
                            <span class="icon"></span> Send
                        </button>
                    </div>

                </form>
            </li>
        </ul>
    </nav>
</section>
<div class="container">this content should be always visible - move/jump down</div>

于 2017-06-27T08:54:26.307 回答
0

使表单元素位置：绝对；并删除溢出：隐藏部分标签

CSS

.filter.dropdown nav > ul > li:first-child:hover form, .filter.dropdown nav > ul > li:first-child a:hover form, .filter.dropdown nav > ul > li:first-child > a:focus + form
{
position: absolute;
    visibility: visible;
    opacity: 1;
    width: 100%;
    background-color: #ccc;
}

.filter {
    background-color: #19679e;
    font-size: 16px;
    position: relative;
    display: block;
}

希望这可以帮助....

于 2017-06-26T14:43:22.603 回答