Question

我的网站上有一个小通知标签，我想在点击触发器时滑出。

我添加了一些 jQuery ，它将div的高度设置为336px。但是，过渡不想工作。

但是，当我进入检查chrome中的元素并手动更改像素值时，转换将如何应用。

以下是我的 jQuery ：

if(trigger.hasClass(open)){
    $("#user-logged-in__dropdown-panel").css("display", "block");
    $("#user-logged-in__dropdown-panel").css("height", "336px");
} else {
    $("#user-logged-in__dropdown-panel").css("height", "0px");
    $("#user-logged-in__dropdown-panel").css("display", "none");
}

我的 HTML ：

<div id="user-logged-in__dropdown-panel">
    <div class="navigation__logged-in-user__dropdown-panel">
        <!-- content !-->     
    </div>
</div>

和我的 CSS ：

#user-logged-in__dropdown-panel{
    display: none;
    position: absolute;
    top: 48px;
    right: -2px;
    width: 323px;
    height: 0px;
    overflow: hidden; /* gives slideout effect */
    transition: height 250ms;
}
.navigation__logged-in-user__dropdown-panel{
    position: relative;
    top: 14px;
    width: 320px;
    height: 320px;
}
.navigation__logged-in-user__dropdown-panel:before{
    content: "";
    display: block;
    position: absolute;
    top: -15px;
    right: -1px;
    width: 127px;
    height: 13px;
}

我已经仔细检查过渡属性是否正确，以及我的所有 jQuery 。但是，它仍然无法发挥作用。

感谢所有帮助：）

编辑：我通过从 CSS 中的display: none删除#user-logged-in__dropdown-panel，设法让转换工作了一会儿。但是，当再次单击触发器（并再次向其添加display属性）时，它将恢复到之前的状态。

Answer 1

jQuery有几种方法可以促进或降低功能。以下代码段使用.toggle()，详细信息在代码段中注释。

<强>段

/* Delegate click event to #btn1...
|  ...call the .toggle method on...
|  ...navPanel to hide and show...
|  ...at a slow duration
*/
$('#btn1').on('click', function() {
  $('.navPanel').toggle('slow');
});

.navPanel {
  display: none;
  width: 320px;
  height: 320px;
  border: 3px ridge #666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='btn1'>Click</button>
<div class="navPanel">
  <p>XXXXXXXXX</p>
  <p>XXXXXXXXXX</p>
  <p>XXXXXXXX</p>
  <p>XXXXXXXXX</p>
</div>

在我的脑海中，您可以使用更多方法：

slide*
- *Up()
- *Down()
- *Toggle()
fade*
- *In()
- *Out()
- *Toggle()
- *To()
hide()
show()

星号表示前缀*或*后缀ex。 fadeIn() slideDown()

转换高度不适用于具有溢出隐藏和固定高度的div

1 个答案: