<a> div 中的链接隐藏/显示 CSS 不起作用答案

【问题标题】：<a> link in a div hide/show with CSS not working<a> div 中的链接隐藏/显示 CSS 不起作用
【发布时间】：2017-01-03 23:58:34
【问题描述】：

在这个站点中，我找到并修改了一个 CSS/HTML 示例。一切似乎都很顺利，但 div 内的 <a> 链接不起作用：它的显示没有问题，但是当我点击它们时，唯一发生的事情就是隐藏 div，仅此而已。

代码如下：

.clicker {
  outline: none;
  text-align: center;
  font-size: 1em;
  font-style: italic;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
  margin-top: -2em;
  margin-bottom: 3em;
}
.hiddendiv {
  display: none;
}
.clicker:focus + .hiddendiv {
  display: block;
}
body#l-autore div.main div.hiddendiv ul.opere {
  font-size: 0.75em;
  list-style-type: none;
  font-style: italic;
  text-align: center;
}
body#l-autore div.main div.hiddendiv ul.opere li {
  display: inline;
}

<body id="l-autore" xml:lang="it-IT">
  <div class="header">
    <h1>Brevi profili biografici degli autori</h1>
  </div>
  <div class="main">
    <h1 id="sigil_toc_id_1">EXAMPLE</h1>
    <div class="clicker" tabindex="1">
      <h2 id="sigil_toc_id_2">
<p class="autori" id="id_romano">Romano</p>
</h2>
    </div>
    <div class="hiddendiv">
      <ul class="opere">
        <li>
          <a href="Cap02sez1.html">
            <span class="nr">I</span>
          </a>
        </li>
        <li>
          <a href="Cap02sez2.html">
            <span class="nr">II</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</body>

当然Cap02sez1.html和Cap02sez1.html这两个文件是存在的：之前把链接放到DIV里面的一个普通链接打开正确的文件。

【问题讨论】：

标签： html css show hidden

【解决方案1】：

当您加载页面时，您将在包含链接的 div 上设置 display: none。单击 Romano 后，您将使用 .clicker:focus + .hiddendiv 使它们暂时可见。但是，这仅适用于 .clicker 处于“焦点”状态时。只要您点击其中一个链接，.clicker 就会失去焦点。

不幸的是，我认为这不可能用原始 CSS 解决，因为 CSS 中既没有 previous selector 也没有 parent selector。因此，可能无法将子级的.hiddendiv 显示定位为带有原始 CSS 的链接。

我会考虑使用 JavaScript（最好是 jQuery）来解决这个问题，只需做一些小改动：

HTML：

<p class="autori" onclick="show()"/>

CSS：

.visible { display: block; }

（同时删除.clicker:focus + .hiddendiv 选择器）

JavaScript / jQuery：

function show() { $(".hiddendiv").toggleClass("visible"); }

当您点击“Romano”时，.hiddendiv 将在可见和不可见之间切换。我相信这就是你所追求的。如果你只想显示它，而不是隐藏它，你可以使用$(".hiddendiv").addClass("visible");。

希望你能够使用 JavaScript；否则我认为这无法解决抱歉！

没有 JavaScript 的更新答案

实际上可以使用原始 CSS 解决您的问题！您可以在原始 CSS 中模拟按钮单击，并对 HTML 的结构进行一些更改。 唯一的方法是使用checkbox 的hacky 版本。首先，我们将您的.clicker 放入复选框的标签中：

<input type="checkbox" id="show" />
<label for="show">
   <div class="clicker" tabindex="1">
      <h2 id="sigil_toc_id_2">
         <p class="autori" id="id_romano">Romano</p>
      </h2>
   </div>
</label>

请注意，clicker div 现在是新输入 #show 的标签。现在我们修改 CSS 以反映这一点，使用新目标，同时隐藏 real 复选框：

#show {
    display: none;
}

然后我们可以根据不可见复选框的:checked 状态来切换可见性：

#show:checked ~ .hiddendiv {
    display: block;
}

#show:not(:checked) ~ .hiddendiv {
    display: none;
}

当然，您还需要删除以下两项：

.hiddendiv {
     display: none;
}

.clicker:focus + .hiddendiv {
     display: block;
}

工作示例here（带有整洁的代码）。

因此，您可以使用原始 HTML 和 CSS 为单独的 div 进行可见性切换：)

没有 JavaScript 和多个隐藏内容 Div 的更新答案

对于隐藏的多个不同部分，它很有可能以相同的方式工作。为此，您只需创建一系列隐藏的复选框，每个开始具有相同的名称。您可以使用#show_1, #show2, #show_3, etc，而不是只使用#show。然后，您可以使用 CSS 正则表达式 [id^=show] 定位它们。

HTML：

<input type="checkbox" id="show_1" />
    <label for="show_1"></label>
</input>

<input type="checkbox" id="show_2" />
    <label for="show_2"></label>
</input>

CSS：

[id^=show] {
  display: none;
}

[id^=show]:checked ~ .hiddendiv {
  display: block;
}

[id^=show]:not(:checked) ~ .hiddendiv {
  display: none;
}

这是一个 new fiddle 显示它使用多个切换控制单个隐藏 div :)

【讨论】：

非常感谢您的建议。不幸的是，我只能使用 css，因为（如 h1 id 所示）我正在从事电子书 3.0 项目。我知道可以使用一些 JS，但为了与市场上大多数电子书阅读器更好地兼容，我只想使用 css/html。那么，我可以让链接在第一次点击 Romano 链接后始终可见而不使它们可见/不可见吗？
看起来您已经更新了代码以添加一些 JavaScript，但如果您只想使用 CSS 和 HTML，让链接始终可见是很容易的。只需删除.hiddendiv { display: none; } :)
我可以在第一次点击 Romano 链接后让链接始终可见，而不是使其可见/不可见吗？（不总是可见，但在第一次点击 Romano 链接后！:-)）。
我刚刚找到了一种无需使用任何 JavaScript 即可让代码完全按照您的要求执行操作的方法。请查看我的更新解决方案:)
完美！最后一个解决方案对我来说没问题。 tnx 很多黑曜石时代。 2017 年新年快乐。

【解决方案2】：

由于是CSS样式，href链接在执行前是断开的。

当您点击“I”或“II”时，'.hiddendiv' 中的每个代码都会松散。

所以如果你想通过点击事件显示和显示“.hiddendiv”，

我建议使用带有 onclick 事件的 javascript

[我做什么]

删除css“.clicker:focus + .hiddendiv {display: block;}”
添加javascript在点击事件中隐藏和显示。
将“a”更改为“div”以使用“onclick”
点击“I”或“II”时，在隐藏'.hiddendiv'之前执行movePage函数

function viewList(){
  document.getElementsByClassName('hiddendiv')[0].style.display = 'block'
}

function movePage(path) {
  window.location.href = path;
  document.getElementsByClassName('hiddendiv')[0].style.display = ''
}

.clicker {
  outline: none;
  text-align: center;
  font-size: 1em;
  font-style: italic;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
  margin-top: -2em;
  margin-bottom: 3em;
}
.hiddendiv {
  display: none;
}
.clicker:focus + .hiddendiv {
/*  display: block;*/
}
body#l-autore div.main div.hiddendiv ul.opere {
  font-size: 0.75em;
  list-style-type: none;
  font-style: italic;
  text-align: center;
}
body#l-autore div.main div.hiddendiv ul.opere li {
  display: inline;
}

<body id="l-autore" xml:lang="it-IT">
  <div class="header">
    <h1>Brevi profili biografici degli autori</h1>
  </div>
  <div class="main">
    <h1 id="sigil_toc_id_1">EXAMPLE</h1>
    <div class="clicker" tabindex="1">
      <h2 id="sigil_toc_id_2">
<p class="autori" id="id_romano" onclick=viewList()>Romano</p>
</h2>
    </div>
    <div class="hiddendiv">
      <ul class="opere">
        <li>
          <div onclick=movePage('Cap02sez1.html')>
            <span class="nr">I</span>
          </div>
        </li>
        <li>
          <div onclick=movePage('Cap02sez2.html')>
            <span class="nr">II</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</body>

【讨论】：

非常感谢您的建议。不幸的是，我只能使用 css，因为（如 h1 id 所示）我正在从事电子书 3.0 项目。