在移动设备上点击隐藏和显示 div

Posted 2023-02-25

【中文标题】在移动设备上点击隐藏和显示 div

【英文标题】：Hide and show div on click on mobile

【发布时间】：2015-12-01 23:32:21

【问题描述】：

我实际上是在尝试在点击时创建一个无限循环的 div。它可以在我的桌面上完美运行，但不能在移动浏览器上运行。出于某种原因，div 只是没有出现在移动浏览器上。这是我用来循环遍历 div 的 jQuery：

$("div").each(function(e) 
    if (e != 0)
        $(this).hide();
);

$('div').click(function()
    if ($("div:visible").next().length != 0)
        $("div:visible").next().show().prev().hide();
    else 
        $("div:visible").hide();
        $("div:first").show();
    
    return false;
);

这些 div 的 CSS 很简单，所以没有冲突：

div 
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;

div img 
    width: 100%;
    display: block;

div:nth-child(1) 
    display: block;

【问题讨论】：

当您对所有可以找到 :visible 的 div 使用 .hide() 时？？

@Mohamed-Yousef 在 CSS 中显示第一个 div，刚刚编辑了帖子。对此感到抱歉

即使你这样做，jquery 也会覆盖它并隐藏所有 div .. 所以不要使用 .each 并循环遍历 div 只需使用 $('div:not(:nth-child(1))' ）。隐藏（）;此代码将隐藏所有 div，但不是第一个

@Mohamed-Yousef 它可以在桌面上运行，并且不会隐藏第一个 div。也许添加 !important to display: block 到第一个 div 可以解决移动设备上的问题？

【参考方案1】：

而不是通过 div 循环

// hide all divs but not the :nth-child(1)
$('div:not(:nth-child(1))').hide();
// or
$('div:not(:first)').hide();

还是用css代替js更好

div
   display : none;

div:nth-child(1) 
   display: block;

然后完成您的代码

$('div').click(function()
    if ($("div:visible").next().length !== 0)
        $("div:visible").next().show().prev().hide();
    else 
        $("div:visible").hide();
        $("div:first").show();
    
    //return false; no need to use
);

【讨论】：

这适用于桌面，就像以前的模型一样。但它仍然无法在移动设备上运行。循环不是无限的，它只经过一次。然后，当您单击最后一个 div 时，一切都消失了。

而在桌面浏览器上循环是无限的。有什么线索吗？

@AustinBranham 好的，我把你的代码放在小提琴中，请用你的完整代码更新它jsfiddle.net/mohamedyousef1980/jxuqtfpn

jsfiddle.net/daznmjaa 这是我的确切代码的更新小提琴，应用了类。

@AustinBranham 它在移动设备上运行良好.. 注意 3 .. chrome 浏览器