如果Div已经被选中或打开，如何停止滑动效果

How to stop Slide effect if the Div is already selected or opened

本文关键字：何停止 Div 如果      更新时间：2023-09-26

我试图使用jquery的toggle()方法创建一个单一的Paee网站。我有4个标题Parent1 'Parent2' &Parent3。都有子div

我想只显示Child1div，并隐藏所有其他div，如果parent1被选中或单击。我写了下面的代码，它不能正常工作，但当我点击parentdiv第二次隐藏元素，如果我再次点击它，它显示元素。

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

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

$(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);
});

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

如果您再次单击已打开的位置，此代码将不执行任何操作。

, 

var child = $('.childs >div').hide();
$('.parents > div').click(function () {
    var targetDiv = child.eq($(this).index());
    if (targetDiv.is(':visible')) { return false; }
    targetDiv.siblings().hide().end().toggle('left');
});
演示

您可以简单地使用:

  $('.parents div').click(function(){
   $('.childs div').not(':eq('+$(this).index()+')').hide();
   $('#child'+($(this).index()+1)).toggle();
  });
演示工作

如果你不想切换，直接显示:

  $('.parents div').click(function(){
   $('.childs div').not(':eq('+$(this).index()+')').hide();
   $('#child'+($(this).index()+1)).show();
  });
演示工作

您可以像这样缩短代码并使用if条件来检查ele是否被隐藏:

$('.parents div').click(function () {
    var idx = $(this).index() + 1;
    if(!$('#child' + idx).is(':visible')) 
      $('#child' + idx).hide().slideDown().siblings().hide();
});
演示

Demo

试试这个。选择元素index，在此基础上你可以切换元素

 $(".parents").click(function (e) {
        $(".childs").children().hide().eq($("H1").index(this)).toggle("left");
    });

使用.show()方法代替.toggle()，它将始终是静态的。

演示

相关文章：