防止两个div元素一次可见

如何防止“内部”div同时可见？假如一个人可见，另一个人被调用，那么当前活动的人应该在新人slidesDown之前上拉。防止两个div元素一次可见

HTML：

  <div class="redirectWrap"> 
       <a id="redirectDefault" class="redirectOuter" href="#"> 
        <h4>Default URL</h4> 
        <span>test.com/tctc91</h4> 
       </a> 
       <a id="redirectCustom" class="redirectOuter" href="#"> 
        <h4>Custom URL</h4> 
        <span>m.tomchristian.co.uk</h4> 
       </a> 
       <div class="redirectDefaultInner redirectBox hide"> 
        test 
       </div> 
       <div class="redirectCustomInner redirectBox hide"> 
        test 
       </div>     
      </div>

的jQuery：

$('.redirectOuter').click(function() { 
    $(this).parent().find('.'+$(this).attr('id')+'Inner').slideUp('fast'); 
    return false; 
}); 

$('.redirectOuter').click(function(e){ 
    var inner = $(this).parent().find('.'+$(this).attr('id')+'Inner'); 
    if(!inner.is(":visible")) { 
     inner.stop().slideDown('fast'); 
    } 
    e.stopPropagation();   
});

来源

2012-03-02 tctc91

编辑： 更新您的代码，使其工作，你想要的，

DEMO

var $redirectBoxes = $('.redirectBox'); 
$('.redirectOuter').click(function(e){ 
    var inner = $(this).parent().find('.'+$(this).attr('id')+'Inner'); 
    if(inner.is(":visible")) { 
     $(this).parent().find('.'+$(this).attr('id')+'Inner').slideUp('fast'); 
    } else { 
     $redirectBoxes.not(inner).slideUp('fast'); 
     inner.stop().slideDown('fast'); 
    } 
    e.stopPropagation();   
});

我认为jQuery的accordion是你所需要的。

DEMO

有了一些改变，您的标记，

<div class="redirectWrap"> 
    <h4><a id="redirectDefault" class="redirectOuter" href="#"> 
     Default URL 
     <span>test.com/tctc91</span> 
    </a><h4> 
    <div class="redirectDefaultInner redirectBox hide"> 
      test 
    </div> 
    <h4><a id="redirectCustom" class="redirectOuter" href="#"> 
     Custom URL 
     <span>m.tomchristian.co.uk</span></a> 
    </h4> 
    <div class="redirectCustomInner redirectBox hide"> 
     test 
    </div>     
</div>

和JS：

$(function() { 
    $('.redirectWrap').accordion(); 
});

来源

2012-03-02 16:17:53

是不是使用jQuery UI只是为了这件小事而矫枉过正？ – tctc91 2012-03-02 16:21:26

@ tctc91取决于，但是如果你不使用jQuery UI并且只是想使用手风琴..你仍然可以通过做一个自定义的构建来完成，它只会给你所需要的必要的库。但想一想你所得到的所有其他好的功能......以及浏览器兼容性/增强功能。 – 2012-03-02 16:25:02

@ tctc91检查我更新的帖子。修改您的代码以按照您的要求工作。 http://jsfiddle.net/skram/b5pT4/2/ – 2012-03-02 16:51:41

在看看jQuery Accordion

来源

2012-03-02 16:10:48 SenorAmor

是不是有点大材小用使用jQuery UI仅用于此小东西？ – tctc91 2012-03-02 16:20:45

我不知道。你告诉我。它到目前为止如何工作？：P – SenorAmor 2012-03-02 16:22:04

是真实的，但我会想象有一个解决这个问题的简单方法，而不必将全新的UI框架包含到我的网站中。我现在无法想到任何解决方案。 – tctc91 2012-03-02 16:24:32

尝试是这样的：

$('.redirectOuter').click(function() { 
    var active =$(this).parent().find('.redirectBox:visible'); 
    var toBeActivated =$(this).parent().find('.'+$(this).attr('id')+'Inner'); 
    $(active).slideUp('fast'); 
    if($(active)[0]===$(toBeActivated)[0]){ 
     return; 
     } 
    $(toBeActivated).slideDown('fast'); 
    return false; 
});

来源

2012-03-02 16:25:36

这很好。虽然看起来动画在上一个动画完成之前就已经出现，但看起来有点奇怪。无论如何要让它在开始新动画之前等待动画完全完成？ – tctc91 2012-03-02 16:38:27

防止两个div元素一次可见

回答

相关问题