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

巴鲁齐

JSFiddle:http : //jsfiddle.net/ncuacvcu/

默认情况下显示DIV主页

当我单击“链接一” /“链接二”时,“ DIV一” /“ DIV二”将替换DIV主页当我再次单击“链接一” /“链接二”时,“ DIV 1” /“ DIV 2”开关关闭,留出空白。那我如何将DIV带回家再次显示?

同时,如果打开了DIV 1,然后单击LINK 2,我希望将DIV 1替换为DIV 2(即不通过DIV home)。

这是我尝试过的方法(以及一些改进方法),但无法使其正常工作:

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

在此先感谢您提供任何提示!

The_Death_Raw

您需要使用slideToggle的回调并检查带有home类的div是否可见,然后显示它。

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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章