文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >CSS Only - Dropdown-Filter:选定项目定位

问CSS Only - Dropdown-Filter:选定项目定位
EN

Stack Overflow用户
提问于 2017-06-26 22:21:34
回答 3查看 1.5K关注 0票数 0

希望任何人能给我一些提示！

我尝试构建一个下拉过滤器-如果过滤器中的一个项目被选中，那么它应该在“filter”类-ToggleButton关闭状态旁边可见。

但是如果我悬停在Open/Close Link上，"Selected Items“就会跳到底部--我知道这是为什么，但是我怎样才能防止这种情况-- "selected Items”如何才能停留在Filter-Button旁边？

JSBin -示例：

http://jsbin.com/lucayaqeno/

代码语言：javascript
复制
<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>

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

谢谢你的帮忙!

css
web-accessibility
html
EN

回答 3

Stack Overflow用户

发布于 2017-06-26 22:48:33

​

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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>

​

票数 1
EN

Stack Overflow用户

发布于 2017-06-26 22:43:23

使表单元素position:absolute；并删除overflow:hidden for section标记

CSS

代码语言：javascript
复制
.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;
}

希望这能帮上忙。

票数 0
EN

Stack Overflow用户

发布于 2017-06-27 16:54:26

​

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/44761909

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档