Question

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

当我单击隐藏按钮时，div会隐藏，但单击显示按钮时，div不会显示。使用谷歌浏览器我检查了元素并注意到这是因为jQuery正在向display: block;的div添加CSS。这使我的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();
    }
});

Answer 1

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

$("#taskList-right").css('display','inline-block');

Answer 2

你可以尝试一些修正案，如：

制作一个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');
  }
});

覆盖show（）设置的CSS

2 个答案: