0

jQueryを使用して非表示および表示するdivがあります。私の関数コードは、div css を変更して div をdisplay: inline-block;別の div と並べて配置する場合を除いて、適切に機能します。

非表示ボタンをクリックすると div が非表示になりますが、表示ボタンをクリックしても div は表示されません。Google chrome を使用して要素を調べたところ、jQuery が div に CSS を追加しているためであることに気付きましたdisplay: block;。これにより、div が表示されず、アニメーションに影響を与えています。

アニメーションに影響を与えることdisplay: inline-blockなく、CSSjQuery をオーバーライドして jQuery を追加する方法を教えてください。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 に答える