css - 点击并显示 - 平板电脑/手机

Question

所以，我目前正在尝试这样做：

 <table class ="tablez">
 <tr>
 <th>Table Title </th>
 </tr>
 <tr>
 <td>
 <a tabindex="0" class="clickable">Click Me!</a>
 <div id="showedClickable">
 <p>This is showed when Click Me! is clicked.</p> 
 </div><!--EO showedClickable -->
 </td>
 </tr>
 </table>

这里是类

  #showedClickable {
 position:absolute;
 display:none;
 width:auto;
 height:auto;
 }

这是您单击时发生的情况。

 a.clickable:focus + #showedClickable {

 display:block;
 }

它在笔记本电脑上的 chrome 上运行良好，但是当我在移动设备（iPhone）上尝试时，这不起作用....这里有什么问题？我该如何解决这个问题，解决这个问题？

感谢您的时间！

Answer 1

我遇到了类似的麻烦。问题是 iPhone 不会根据 CSS 中的事件重绘兄弟姐妹。

尝试像这样嵌套元素并使用子选择器而不是兄弟选择器。它通常也更具语义，因为您单击的项目通常是所显示内容的标题。

奇怪的是，iPad 支持将鼠标悬停作为点击事件，

<ul>
    <li><a href="">Click me</a>
        <ul>
            <li>This is showed when Click Me! is clicked.</li>
        </ul>
    </li>

li:hover ul {display: block;}