logo标签列表

当用户在菜单外点击时折叠弹出式菜单。

htmlcss
3

我正在创建一个不使用JavaScript的CSS下拉菜单。经过研究，我找到了这段代码http://jsfiddle.net/zsp7t/1/

<div class="dropdown" id="dropdown">
    <input type="checkbox" id="drop1" />
    <label for="drop1" class="dropdown_button">
        <img src="http://ichef.bbci.co.uk/wwfeatures/43_43/images/live/p0/17/tx/p017txf6.jpg" height="43" width="43" /><span id="arrowSpan" class="arrow"></span>
    </label>
    <ul class="dropdown_content">
        <li><a href="#">Privacy settings</a>
        </li>
        <li><a href="#">Account settings</a>
        </li>
        <li><a href="#">Logout</a>
        </li>
    </ul>
</div>

以下是 CSS 代码：

body {
    background-color: white;
    font: normal 11px Tahoma, Verdana, Arial, Sans-Serif;
    color: #222;
    height: 380px;
}

#arrowSpan{
    display:block;
    margin-left:17px;
    margin-top:2px;
    margin-bottom:5px;
}

.dropdown {
    display: block;
    display: inline-block;
    margin: 0px 3px;
    position: relative;
}
/* ===[ For demonstration ]=== */
 .dropdown {
    margin-top: 25px
}
/* ===[ End demonstration ]=== */
 .dropdown .dropdown_button {
    cursor: pointer;
    width: auto;
    display: inline-block;
    padding: 0px 0px;
    border: 1px solid silver;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 2px;
    font-weight: bold;
    color: #717780;
    line-height: 16px;
    text-decoration: none !important;
    background: white;
}
.dropdown input[type="checkbox"]:checked + .dropdown_button {
    border: 1px solid #3B5998;
    color: white;
    background: silver;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 2px 2px 0px 0px;
    border-radius: 2px 2px 0px 0px;
    border-bottom-color: silver;
}
.dropdown input[type="checkbox"] + .dropdown_button .arrow {
    display: inline-block;
    width: 1px;
    height: 1px;
    border-top: 5px solid silver;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}
.dropdown input[type="checkbox"]:checked + .dropdown_button .arrow {
    border-color: white transparent transparent transparent
}
.dropdown .dropdown_content {
    position: absolute;
    border: 1px solid #777;
    padding: 0px;
    background: white;
    margin: 0;
    display: none;
    right:0;
}
.dropdown .dropdown_content li {
    list-style: none;
    margin-left: 0px;
    line-height: 16px;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    margin-top: 2px;
    margin-bottom: 2px;
}
.dropdown .dropdown_content li:hover {
    background: silver;
}
.dropdown .dropdown_content li a {
    display: block;
    padding: 2px 7px;
    padding-right: 15px;
    color: black;
    text-decoration: none !important;
    white-space: nowrap;
}
.dropdown .dropdown_content li:hover a {
    color: white;
    text-decoration: none !important;
}
.dropdown input[type="checkbox"]:checked ~ .dropdown_content {
    display: block
}
.dropdown input[type="checkbox"] {
    display: none
}

这对我来说非常完美...唯一的问题是，当用户单击空白区域时，我希望列表消失(取消选择框)。有什么帮助吗？

注：我不想使用任何JavaScript。

您无法这样做，因为切换器与相同的源绑定。 - Mr. Alien
你可以使用带有目标#的<a>标签，然后使用它的:focus选择器，怎么样？ - Kroltan
虽然这是创建下拉菜单的有趣方式，但它完全破坏了页面的语义逻辑。 - Etheryte
@Nit，我同意，看看我的答案会有一个更语义化的版本（非常少）。如果提问者想要语义化，他应该使用JavaScript来处理这个问题，或成为CSS黑魔法师。 - Kroltan
2个回答
0

您可以使用没有目标的<a>标签（只有在href上的哈希）并利用其:focus属性：

HTML: http://jsfiddle.net/sVxxZ/1/

<span class="dropdown">
    <a href="#">
        Dropdown
    </a>
    <span class="dropdown_content">asdf</span>
</span>

CSS：

.dropdown_content {
    display: none;
}
.dropdown a:focus + .dropdown_content {
    display: block;
}

<a>标签（链接）有一个特殊的行为，即在单击它们时接收:focus伪类，直到用户单击其他内容。例如，在IE和一些旧版本的Firefox和Chrome中，这被用于在最后单击的链接周围添加虚线边框。单击其他任何地方都会取消此边框。

后来，这被标准化为应用于可用元素（输入、链接等）的:focus伪类，当它们被单击/触摸/切换到并保持焦点（用户单击/触摸/切换到其他内容）时。链接（<a>元素）还需要一个href属性才能点击（可用）。

通过将href设置为#，我们告诉浏览器导航到此页面以命名为（是的，什么也没有）。由于此锚点不存在，因此不会发生任何事情，但链接仍然可以点击，因此在聚焦时将应用:focus伪类。

我们将 dropdown_content 的属性设置为 display:none，因此默认情况下它是隐藏的。使用兄弟选择器 + 选择在 HTML 中紧接着有一个带有 :focus 链接的类为 dropdown_content 的元素，并将其 display 设置为可见值 block。当用户单击其他内容（包括菜单中的任何内容）时，菜单将关闭，因为链接不会保持 :focus 状态。

如果您希望在用户单击菜单内部时保持菜单打开状态，则需要稍微更改 CSS 选择器（实际上只需删除 +），并将菜单 <div> 放置在 <a> 标签内部。

您原始的 fiddle 示例需要进行以下更改：http://jsfiddle.net/zsp7t/32/

我无法理解你试图解释的逻辑！！ - Hossam Din
@HossamDin会更好地解释这个问题，请稍等几分钟。 - Kroltan
好的，实际上逻辑听起来是可行的...但代码不行。我试图编辑它，但没有结果。 - Hossam Din
0
使用标签作为叠加层。虽然我更倾向于使用JS。
<div class="dropdown" id="dropdown">
    <input type="checkbox" id="drop1" />
    <label for="drop1" class="dropdown_button">
        <img src="http://ichef.bbci.co.uk/wwfeatures/43_43/images/live/p0/17/tx/p017txf6.jpg" height="43" width="43" /><span id="arrowSpan" class="arrow"></span>
    </label>
    <span class="dropdown_button_dummy">
        <img src="http://ichef.bbci.co.uk/wwfeatures/43_43/images/live/p0/17/tx/p017txf6.jpg" height="43" width="43" /><span id="arrowSpan" class="arrow"></span>
    </span>
    <div class="ddw">
        <ul class="dropdown_content">
            <li><a href="#">Privacy settings</a></li>
            <li><a href="#">Account settings</a></li>
            <li><a href="#">Logout</a></li>
        </ul>
    </div>
</div>

从 .dropdown 中删除 position: relative; 以使标签相对于 body 定位。
.dropdown {
    display: inline-block;
}

.dropdown .dropdown_button {
    display: inline-block;
   /* Style */
}

.dropdown .dropdown_button_dummy {
    display: none;
}

.dropdown input[type="checkbox"]:checked ~ .dropdown_button_dummy {
    display: inline-block;
    /* Style */
}

.dropdown input[type="checkbox"]:checked + .dropdown_button {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: block;
    z-index: 1;
    /* Remove styles */
}

.dropdown .ddw {
    position: relative;
    z-index: 2;
}

.dropdown input[type="checkbox"]:checked ~ .ddw > .dropdown_content {
    display: block
}

.dropdown input[type="checkbox"] {
    display: none
}

由于您失去了下拉按钮，因此请创建一个dropdown_button_dummy来替换标签。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接