<a> link 在 div hide/show 中 CSS 不工作

Question

在这个站点我发现并修改了一个 CSS/HTML 例子。一切似乎都很顺利，但是 div 中的 <a> link 不起作用：它的显示没有问题，但是当我点击它们时，唯一发生的事情就是隐藏 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两个文件当然是存在的：之前把link放在DIV里面正常link打开正确的文件.

Answer 1

当您加载页面时，您在包含 link 的 div 上设置 display: none。单击 Romano 后，您将使用 .clicker:focus + .hiddendiv 使它们暂时可见。但是，这仅适用于 .clicker 在 'focus' 中的情况。一旦您单击其中一个 link，.clicker 就会失去焦点。

不幸的是，我认为这不可能用原始 CSS 解决，因为 CSS 中既没有 previous selector 也没有 parent selector。因此，可能无法使用原始 CSS.

来定位子 link 的 .hiddendiv 显示

我会考虑使用 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

的更新答案

实际上可以用 raw 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（带有整理过的代码）。

因此，您有一个单独的 div 的可见性切换，原始 HTML 和 CSS :)

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

很有可能使它以相同的方式与隐藏的多个不同部分一起工作。为此，您只需创建一系列隐藏的复选框，每个 start 具有相同的名称。您可以使用 #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 显示它在 dividual hidden divs :)

中使用多个切换控制

Answer 2

由于CSS样式，hreflink在执行前断开连接。

当您单击 "I" 或 "II" 时，'.hiddendiv' 中的每个代码都是松散的。

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

我建议将javascript与onclick事件一起使用

[我做什么]

删除 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>

<a> link 在 div hide/show 中 CSS 不工作

<a> link in a div hide/show with CSS not working

html

css

hidden

show

没有 JavaScript

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