JQuery切换Divs基于索引不单击时两次点击

并感谢您阅读此问题。让我通过说我不是程序员并且只是试图学习JavaScript来使我自己的网站看起来和按照我想要的方式工作来做序。JQuery切换Divs基于索引不单击时两次点击

我有一个页面有几个隐藏的divs。我使用的是同一类的元素和不同的目标来触发这个jQuery

jQuery(function() { 
jQuery('.nav').click(function() { 
    var index = $(this).index(), 
     newTarget = jQuery('.targetDiv').eq(index); 
    jQuery('.targetDiv').not(newTarget).slideUp('fast') 
    newTarget.delay('fast').slideToggle('fast') 
    return false; 
    }) 
});

所以我的“.targetDiv” S看起来就像这样：

<div class=".targetDiv" style="display:none">div1</div> 
<div class=".targetDiv" style="display:none">div2</div> 
<div class=".targetDiv" style="display:none">div3</div>

与‘导航’看起来是这样的这

<a href="#" class=".nav" target="1">link1</a> 
<a href="#" class=".nav" target="2">link2</a> 
<a href="#" class=".nav" target="3">link3</a>

这不是我的代码，我是从这里：http://forum.jquery.com/topic/slidetoggle-multiple-divs-31-5-2013

它完全按照它的设计工作，我对此没有任何抱怨。当你点击一个链接时，相应的div会切换，但当你再次点击同一个div时，它会再次切换并向上滑动（这就是代码的写法）。我想阻止这种情况的发生，而且由于我是Javascript和Jquery的新手，我无法弄清楚如何去做。我的非程序员头脑假设应该有某种if else子句，你会说：

如果.targetDiv是：visible，那么不要切换newTarget。但是，当我试图这样做时，它不起作用。

if($(".targetDiv").is(":hidden")) {  jQuery(function() { 
jQuery('.nav').click(function() { 
    var index = $(this).index(), 
     newTarget = jQuery('.targetDiv').eq(index); 
    jQuery('.targetDiv').not(newTarget).slideUp('fast') 
    newTarget.delay('fast').slideToggle('fast') 
    return false; 
    }) 
});} 

else {alert("already open")}

我不知道我应该怎么回事处理这个问题，但它必须是可能的，我可能只是在想如何实现我想要的完全错误的方式。我对javascript的理解很少，但我并不是要求某人为我写这篇文章，我宁愿让别人告诉我，我做的这是不正确的，然后解释我应该尝试做什么。然后我可以使用谷歌搜索的方式来实现这一目标。

再次感谢您花时间阅读本文，并希望我已经详细解答了一些答案。

来源

2014-09-13 Benjamin Roberts

你只需要包装两种“滑”线路中的if语句，就像这样：

if (!newTarget.is(':visible')) 
{ 
    jQuery('.targetDiv').not(newTarget).slideUp('fast'); 
    newTarget.delay('fast').slideToggle('fast'); 
}

您可能还需要修复与HTML，例如一些问题从你的班级名称中抽出时间。在查询DOM元素时，“。”意思是“找到一个叫做_ [无论在点后面的东西]”。不要在课堂上放点。

您可能还想要拿出<a>标签的href属性。他们没有必要。

Here是一个可用的JSFiddle。干杯!

来源

2014-09-13 20:13:19 bowheart

完美！谢谢。 – 2014-09-14 21:32:08

我的歉意是，我的html实际上在课堂上没有“。”，这是我在输入问题时忽略的一个愚蠢的意外。无论答案完美无缺，所以非常感谢！ – 2014-09-14 21:34:08

JQuery切换Divs基于索引不单击时两次点击

回答

相关问题