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 中的事件重绘 sibling 。

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

奇怪的是 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;}