单击关闭其他打开的 div答案

【问题标题】：Close other open divs on click单击关闭其他打开的 div
【发布时间】：2011-06-15 10:43:57
【问题描述】：

我有几个 div 隐藏在父级的溢出中，并在单击相应的导航菜单项时让它们动画化到视图中，但我希望每个 div 在打开另一个 div 后返回其原始位置。每个 div 和 nav 项都有一个单独的对应 id。

代码如下。

我知道这里已经有很多类似的问题，但对 Jquery 来说还很新，所以任何帮助都会很棒。

var sipPos = 0;
$(document).ready(function() {
$("#news").click(function(e) {
    e.preventDefault();
    $("#tab1").animate({ bottom: sipPos }, 600, 'linear', function() {
        if(sipPos == 0) { sipPos = -800;}
        else { sipPos = 0; }
    });
});
});

*抱歉 html 如下

<!DOCTYPE html>
<html>
<div id="content">


<nav><strong>
<ul>
    <li><a href="#" title="News" id="news">NEWS  <span class="slash">//</span>         </a></li>
    <li><a href="#" title="Dates" id="dates">LIVE DATES  <span    class="slash">//</span></a></li>
    <li><a href="#" title="Media" id="media">MEDIA  <span class="slash">//</span></a></li>
    <li><a href="#" title="Band" id="band">BAND  <span class="slash">//</span></a></li>
    <li><a href="#" title="Community" id="community">COMMUNITY <span class="slash">//</span></a></li>
    <li><a href="#" title="Merchandise" id="merch">MERCHANDISE <span class="slash">//</span></a></li>
</ul></strong>
</nav>

<div id="tab1">
</div>

<div id="tab2">
</div>

<div id="tab3">
</div>

<div id="tab4">
</div>

<div id="tab5">
</div>

</div>

编辑

给所有的导航链接一个选项卡类和一个幻灯片类的 div。

$(document).ready(function() { 
$(".slide");
lastMove = 0;
$(".tab").click(function() { 
    divIndex = $(this).index(); // this index relates to the ordered div list
    if (lastMove.length > 0) {
        $(lastMove).animate({"bottom": "-=800px"}, "slow");

    }
    lastMove = $(".slide:eq("+divIndex+")");
    $(lastMove).animate({"bottom": "+=800px"}, "slow"); 
});
});

第一个选项卡现在为每个导航项打开，而不是每个对应的 div，索引问题？

【问题讨论】：

标签： jquery hide jquery-animate html

【解决方案1】：

嗯，

你的意思是这样的： http://jsfiddle.net/NWMZJ/1/

//css
.moveDiv {
position:absolute;
left:50px;
top:50px;
    display: block;

}

<div class="moveDiv" id="1">content1content1content1</div>
<div class="moveDiv" id="2">content2content2content2</div>

    $(document).ready(function() { 
    lastMove = 0;
    $(".moveDiv").click(function() { 
        if (lastMove.length > 0) {
            $(lastMove).animate({"left": "-=200px", "top": "-=200px"}, "slow");
        }
        lastMove = $(this);
        $(lastMove ).animate({"left": "+=200px", "top": "+=200px"}, "slow"); 
    });
});

我相信你问的基本问题是当你点击一个 div 到预设坐标时如何移动它，然后当你点击另一个 div 时将移动的 div 移回并放置新的。

需要注意的是，在 CSS 中，DIV 是默认位置：未设置时为静态，因此您必须将其声明为绝对，否则它将不起作用。

我已尝试您的评论@jsfiddle.net/NWMZJ/3

列表的排列与 div 排列一致，因此当您选择类 2 时，它会选择第二个要显示的 div。

////////

你能确认你已经把类放到了 html 标签上吗？

       <nav><strong> <ul>     
            <li class="tab"><a href="#" title="News" id="news">NEWS  <span class="slash">//</span>         </a></li>     
            <li class="tab"><a href="#" title="Dates" id="dates">LIVE DATES  <span    class="slash">//</span></a></li>     
            <li class="tab"><a href="#" title="Media" id="media">MEDIA  <span class="slash">//</span></a></li>     
            <li class="tab"><a href="#" title="Band" id="band">BAND  <span class="slash">//</span></a></li>     
            <li class="tab"><a href="#" title="Community" id="community">COMMUNITY <span class="slash">//</span></a></li>     
            <li class="tab"><a href="#" title="Merchandise" id="merch">MERCHANDISE <span class="slash">//</span></a></li> </ul></strong> </nav>  

           <div class="slide" id="tab1"> NEWS</div>
          <div class="slide" id="tab2"> DATES</div>
          <div class="slide" id="tab3">MEDIA</div> 
         <div class="slide" id="tab4"> BAND</div>  

<div class="slide" id="tab5"> COMMUNITY</div> 
<div class="slide" id="tab6"> MERCHANDISE </div>

【讨论】：

是的，基本上就是这样，但我可以将该类分配给导航列表项以触发点击功能吗？抱歉，这是新手。
@John Hmm 似乎我有点过于急切了，我已经删除了淡出/淡入，因为 div 隐藏在溢出中。这些链接现在只打开第一个选项卡，尽管它们确实在每次单击时将其向下和向后移动，所以我认为问题出在索引中。我已经编辑了上面的问题。
看我的编辑，听起来你没有将类标签附加到 html 标签上，没有这些索引将无法工作

【解决方案2】：

我会给 div 一个类“选项卡”。然后你可以写：

$("#tab1").animate({ bottom: sipPos }, 600, 'linear', function() {
   if(sipPos == 0) { sipPos = -800;}
   else { sipPos = 0; }
});

$(".tab:not(#tab1)").animate({ bottom: 0}); //.....

http://api.jquery.com/not-selector/

【讨论】：

干杯，但这似乎打开了，然后在点击时立即关闭下一个 div，同时保持原来的打开状态