0

我有一个使用 jQuery 隐藏和显示的 div。display: inline-block;除了将 div css 更改为使 div 与另一个 div 并排放置时，我的功能代码可以正常工作。

当我单击隐藏按钮时，div 隐藏，但单击显示按钮时，div 不显示。使用谷歌浏览器我检查了元素并注意到这是因为 jQuery 正在将 CSS 添加到display: block;. 这使我的 div 不显示并影响动画。

知道如何覆盖 CSSjQuery 添加并使 jQuery 添加display: inline-block而不display: block;影响动画吗？我的代码在这里 CSS：

#taskList-right {
    width: 48%;
    background-repeat: no-repeat;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    clear: both;
    display: inline-block;
    padding: 5px 5px 5px 5px;
    float: right;
    margin-right: 7px;
    overflow-wrap: break-word;
}

jQuery：

$("#package_buttn").click(function () {
    if ($("#taskList-right").is(":hidden")) {
        console.log('passed here');
        // $("#taskList-right").slideDown();//this function should slide the div down but is commented for bug tracking.
        $("#taskList-right").show();
    } 
    else {
        $("#taskList-right").slideUp();
    }
});
4

2 回答 2

0

尝试使用 css 函数添加所需的显示样式。

$("#taskList-right").css('display','inline-block');
于 2013-01-10T10:52:13.253 回答
0

您可以尝试一些修改，例如：

做一个CSS类

.inlineBlock{   
    display:inline-block;
}

进而：

$("#package_buttn").click(function () {
  if ($("#taskList-right").is(":hidden")) {
    console.log('passed here');
    $("#taskList-right").addClass('inlineBlock');
  } else {
    $("#taskList-right").slideUp().removeClass('inlineBlock');
  }
});
于 2013-01-10T11:07:00.433 回答