Question

可能是我缺少的东西，但我对此有点头疼。

我想在显示/隐藏链接的右侧对齐“子菜单div”。

当我正确加载div时，当我点击隐藏/显示链接时，突然div将位置更改为底部。

顺便说一下，有没有其他更好的方法来做到这一点，或者这是好事？另外，如果我没有在页面加载上显示div的内容，我正在考虑使用.hide（）或隐藏样式，那可以吗？

提前致谢

CSS

div.inline2 {
    display: inline-block;
    width: 150px;
}
div.inline {
    position:absolute;
    display: inline-block;
    border:1px solid #CCC;
    background:#FFF;
}

JS

$(document).ready(function() {  

  $('a#show').click(function() {
    $('div#submenu').fadeIn();
  });

  $('a#hide').click(function() {
    $('div#submenu').fadeOut();
  });
});

HTML

  <div class="inline2">
    <a href="#" id="show">Show_links</a>
    <a href="#" id="hide">Hide links</a>
  </div>

  <div class="inline" id="submenu">
    <a href="#">Link 1</a><br />
    <a href="#">Link 2</a>
  </div>

Answer 1

fadeIn()添加了div样式display: block;，因此div显示为下一行

在div设置为inline-block之前

div.inline2 {
    display: inline-block;
    width: 150px;
}

<小时/> fiddle Demo

使用类添加fadeIn和fadeOut的效果，而不将div移动到下一行

$(document).ready(function () {
    $('a#show').click(function () {
        $('div#submenu').removeClass('hidden').addClass('visible');
    });

    $('a#hide').click(function () {
        $('div#submenu').addClass('hidden').removeClass('visible');
    });
});

<强> CSS

.visible {
    opacity: 1;
    transition: opacity 2s linear;
}
.hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 2s, opacity 2s linear;
}

Answer 2

尝试：

$(document).ready(function() {          
  $('a#show').click(function() {
    $('div#submenu').removeClass("none");
  });    
  $('a#hide').click(function() {
    $('div#submenu').addClass("none");
  });
});

Fiddle here.

Answer 3

您只需要更改jQuery代码:)：

<script type="text/javascript">
  $(document).ready(function() {  

$('a#show').click(function() {
$( "div#submenu" ).animate({
    opacity: 1
  }, 500, function() {
    // Animation complete.
  });
});

$('a#hide').click(function() {
$( "div#submenu" ).animate({
    opacity: 0
  }, 500, function() {
    // Animation complete.
  });
});
});</script>

FadeIn FadeOut以及为什么div会移动？

3 个答案: