Css 点击&；展示-平板电脑/手机

因此，我目前正在尝试这样做：

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

以下是单击时发生的情况

 a.clickable:focus + #showedClickable {

 display:block;
 }

它在笔记本电脑上的chrome浏览器上运行良好，但当我在手机（iPhone）上尝试时，它不起作用……这里有什么问题？？我如何解决这个问题

---

谢谢你抽出时间

我也有类似的问题。问题是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;}

这是显示时，点击我！单击


li：悬停ul{display:block；}

您也可以尝试悬停吗？e、 g:a.可点击：悬停+显示可点击。移动浏览器将悬停解释为单击。@OliverBenns但如果我实现了2个“单击我”并在同一地点显示不同的内容。如果单击其中一个并将鼠标悬停在另一个上，两个显示将重叠，看起来很混乱……在这种情况下，您建议我怎么做？我想我们需要查看代码。你能设置一个JSFIDLE吗？@OliverBenns我告诉你的是：如果用户点击其中一个来查看（很可能是在计算机上），当你在另一个上悬停时，它会重叠，我有什么办法可以解决这个问题吗？所以它的笔记本电脑/移动设备友好，比如…当你悬停焦点时，有没有办法使焦点无效？是的，我知道，我的问题是，当有人单击块时，如果用户在使用普通浏览器，当用户悬停在Click Me2上时，它重叠了（比如在这个fiddle:jsfiddle.net/Q83UE中），我该如何隐藏一个并显示另一个？

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