Question

感谢您阅读此问题。让我先说一下，我不是一个程序员，只是试图学习javascript，让我自己的网站看起来和我想要的功能。

我有一个包含多个隐藏div的页面。我正在使用具有相同类和不同目标的元素来触发此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”看起来像这样：

<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知之甚少，但我并不是要求有人为我写这个，我宁愿让别人告诉我我做的是不正确的，然后解释一下我该尝试做什么。然后我可以使用谷歌搜索实现这一目标的方法。

再次感谢您花时间阅读本文，并希望我已经足够详细以获得一些答案。

Answer 1

你只需要在if语句中包含两个'slide'行，如下所示：

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

您可能还想修复html的一些问题，例如：从你的班级名称中抽出时间段。查询DOM元素时，“。”意思是“找到有一个名为 _ 的类的东西[点后面的任何东西]”。不要在课堂上加点。

您可能还想要取出href代码的<a>属性。它们不是必需的。

Here是一个有效的JSFiddle。干杯！

基于索引的JQuery切换Divs在单击两次时不进行retoggle

1 个答案: