防止一次显示两个div元素

Question

如何防止同时显示两个“内部” div。 假设一个可见，另一个被调用，则当前处于活动状态的一个应该在新的slidesDown之前slideUp。

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

编辑：更新了代码以使其按需工作，

演示

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 手风琴是您所需要的。

演示

对标记进行一些更改后，

<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手风琴

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