Question

我正在尝试创建的是一个可以在不使用JavaScript或jQuery的情况下工作的切换。我遇到的主要问题是在#menu选择器上应用目标时，将切换文本从打开切换为关闭。导航默认折叠，并通过#menu切换打开。

HTML

<nav class="site-nav" id="menu">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</nav>

<section class="site-nav__toggle">
  <a class="site-nav__toggle--open" href="#menu">Open</a>
  <a class="site-nav__toggle--close" href="">Close</a>
</section>

CSS通过SCSS

.site-nav {
  border-bottom: 4px solid black;
  float: left;
  height: 0;
  overflow: hidden;
  width: 100%;

  &:target {
    height: 100%;
      min-height: 170px;
    transition: height .25s ease, min-height .25s ease;
  }
}

.site-nav__toggle--open > .site-nav:target,
.site-nav__toggle--close > .site-nav {
  display: none;
}

.site-nav__toggle--close > .site-nav:target,
.site-nav__toggle--open > .site-nav {
  display: inline;
}

我遇到的主要问题是文本没有打开目标状态。如果我在这个特殊问题上遗漏了任何东西，也许第二双眼睛会帮助并发现明显的情况。

Answer 1

来自W3C：

div＆gt; P

选择父元素为DIV元素的所有P元素

div + p

选择紧接在DIV元素
之后放置的所有P元素

我认为您的选择器应该看起来像

.site-nav:target + .site-nav__toggle .site-nav__toggle--open,
.site-nav + .site-nav__toggle .site-nav__toggle--close {
  display: none;
}

.site-nav:target + .site-nav__toggle .site-nav__toggle--close,
.site-nav + .site-nav__toggle .site-nav__toggle--open {
  display: inline;
}

检查此codepen：

http://codepen.io/anon/pen/goAIu

最佳，马立克

显示/隐藏基于以下内容的切换文本：target（No JS）

1 个答案: