Question

In this site I found and modified a CSS/HTML example. All seems go well but <a> link inside the div not working: its show without problems but when I click on them the only thing that happen is to hide the div and no more.

Here is the code:

.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>

Of course the two files Cap02sez1.html and Cap02sez1.html exist: before to put the link inside the DIV a normal link open the right file.

Answer 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结构进行一些更改。唯一方法是使用hacky版本的checkbox。首先，我们将您的.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以反映这一点，使用新目标，同时隐藏真实复选框：

#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和多个隐藏内容分区的答案

很有可能让隐藏的多个不同部分以相同的方式工作。为此，您只需创建一系列隐藏的复选框，每个复选框都以相同的名称开始。您可以使用#show，而不是仅使用#show_1, #show2, #show_3, etc。然后，您可以使用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：）

Answer 2

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

当您点击＆＃34;我＆＃34;或者＆＃34; II＆＃34;，代码在＆＃39; .hiddendiv＆＃39;中的每个代码都是松散的。

所以，如果你想显示和显示＆＃34; .hiddendiv＆＃34;点击事件，

我建议在onclick事件中使用javascript

[我做的]

删除css＆＃34; .clicker：focus + .hiddendiv {display：block;}＆＃34;
添加javascript以隐藏并在点击事件中显示。
更改＆＃39; a＆＃39;到＆＃39; div＆＃39; div使用＆＃34; onclick＆＃34;
点击＆＃34;我＆＃34;或者＆＃34; II＆＃34;，在隐藏＆＃39; .hiddendiv＆＃39;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

2 个答案:

更新了没有JavaScript的答案

更新了没有JavaScript和多个隐藏内容分区的答案