Question

我正在尝试使用jquery的toggle()方法创建Single Paee网站。我有4个标题Parent1'Parent2'＆amp; Parent3。所有人都有孩子。

如果选择或点击Child1，我只想显示parent1 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;

        }); 

});

Answer 1

您可以使用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);
});

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

Answer 2

您可以简单地使用：

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

<强> Working Demo

如果你不想toogle并只是显示：

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

<强> Working Demo

Answer 3

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

尝试，

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

DEMO

Answer 4

<强> Demo

试试这个。根据您可以切换元素

获取所选元素index

 $(".parents").click(function (e) {

        $(".childs").children().hide().eq($("H1").index(this)).toggle("left");

    });

Answer 5

您可以像这样缩短代码并执行if条件以检查ele是否隐藏：

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

Demo

Answer 6

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

Demo

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

6 个答案:

DEMO

Demo