个人中心
gpt4 book ai didi

javascript - 如果已选择或打开 Div，如何停止幻灯片效果

转载 作者：太空宇宙 更新时间：2023-11-04 14:16:43 24 4
gpt4 key购买 nike

我正在尝试使用 jquery 的 toggle() 方法创建一个 Single Paee 网站。我有 4 个标题 Parent1 'Parent2' 和 Parent3。都有子 Divs。

如果选择或单击 parent1，我只想显示 Child1 div，并隐藏所有其他 Div。我写了下面的代码，它不能正常工作，但是当我第二次点击 parent div 时它隐藏了该元素，如果我再次点击它它会显示该元素。

请告诉我如何解决这个问题。

<body>
<div class="parents">
    <div id="parent1"> <h1>First</h1></div>
    <div id="parent2"> <h1>Second</h1></div>
    <div id="parent3"> <h1>Third</h1></div>
</div>


<br />
<br />

<div class="childs">

    <div id="child1"> <h3>First</h3></div>
    <div id="child2"> <h3>Second</h3></div>
    <div id="child3"> <h3>Third</h3></div>
</div>   

</body>

Jquery

$(document).ready(function(e) {

    $("#child2").hide();
    $("#child3").hide();    


    $("#parent1").click(function(){

        $("#child2").hide();
        $("#child3").hide();
        $("#child1").toggle('left');
        return false;

        }); 


if ($("#child2").hide())
{

    $("#parent2").click(function(){

        $("#child1").hide();
        $("#child3").hide();
        $("#child2").toggle('left');
        return false;

        }); 
}


    $("#parent3").click(function(){

        $("#child2").hide();
        $("#child1").hide();
        $("#child3").toggle('left');
        return false;

        }); 

});

最佳答案

您可以使用 HTML 属性 data-target=""

Demo

html

<div class="parents">
    <div id="parent1" data-target="#child1">
         <h1>First</h1>
    </div>
    <div id="parent2" data-target="#child2">
         <h1>Second</h1>
    </div>
    <div id="parent3" data-target="#child3">
         <h1>Third</h1>
    </div>
</div>
<br />
<br />
<div class="childs">
    <div id="child1">
         <h3>First</h3>
    </div>
    <div id="child2">
         <h3>Second</h3>
    </div>
    <div id="child3">
         <h3>Third</h3>
    </div>
</div>

CSS

.hidden {
    display: none;
}

j查询

$(document).ready(function () {
    $('.childs div').addClass('hidden');
    function changeDiv() {
        var target = $(this).data('target');
        $('.childs div').addClass('hidden');
        $(target).removeClass('hidden');
    }
    $('.parents div').click(changeDiv);
});

编辑:编辑 jquery 使所有 .childs div 最初隐藏

关于javascript - 如果已选择或打开 Div，如何停止幻灯片效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24262821/

24 4 0
文章推荐： javascript - 带有onclick javascript函数的下拉菜单
文章推荐： c++ - 按对象的属性对对象的 vector 进行排序
文章推荐： c++ - 将来自套接字的 read() 的输出存储在 char 变量中
文章推荐： css - 为什么此文本不显示 CSS 中指定的颜色？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com