防止两个div元素一次可见

Question

如何防止两个“内部”div同时可见。假如一个是可见的，而另一个是可见的，那么当前活动的那个应该在新的slideDown之前滑动。

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

Answer 1

修改 更新了您的代码，使其按您的需要工作，

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

Answer 2

查看jQuery Accordion

Answer 3

尝试这样的事情：

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