JQuery Toggle Slide – 当其他元素切换关闭时显示元素

Question

DIV 默认显示主页。

当我点击LINK一个/LINK两个,DIV一个/DIV两个替换DIV家。当我再次点击 LINK one/LINK two 时，DIV one /DIV 两个 切换关闭，留下空白 space。我如何让 DIV home 在那个时刻再次显示？

同时，如果DIV一个打开，我点击LINK两个，我希望 DIV one 被 DIV two 替换（即不经过 DIV家).

这是我尝试过的方法（以及一些变体），但我无法让它工作：

 $("a#one_toggle").click(function()
         {
           $(".hideall").not(".one").slideUp();
           $(".one")slideToggle(function(){
               if($('#client1').is(':visible')){
                   $('#client0').SlideUp();
               } else{
                   $('#client0').SlideDown();
               }
         });
 });

提前感谢您的任何提示！

Answer 1

你需要使用 slideToggle 的回调，检查 div 和 class 主页是否可见，然后显示它。

http://api.jquery.com/slidetoggle/

http://api.jquery.com/is/

$(function() {
    $("a#one_toggle").click(function() {
         $(".hideall").not(".one").slideUp();
         $(".one").slideToggle('slow', function() {
            showHome($('.one'));
         }); 
    });
           
    $("a#two_toggle").click(function() {
         $(".hideall").not(".two").slideUp();
         $(".two").slideToggle('slow', function() {
            showHome($('.two'));
         }); 
    });
});

function showHome(elementToCheck) {
    // now we know if the div to check is visible or not
    if (!$(elementToCheck).is(':visible')) {
        // the div is not visible so we show it
        $('.home').slideDown();
    }
}

.one,
.two {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="one_toggle">link one</a>
<a href="#" id="two_toggle">link two</a>

<div class="home hideall">
  home
</div>

<div class="one hideall">
  one
</div>

<div class="two hideall">
  two
</div>

JQuery Toggle Slide – 当其他元素切换关闭时显示元素

JQuery Toggle Slide – display element when other elements toggle closed

javascript

jquery

toggle

slide