jQuery 將我的顯示內聯塊更改為無

Question

我有一個問題，我首先嘗試制作一個按鈕來隱藏文本，然后隱藏自己，然后顯示一個名為“顯示”的新按鈕。

我讓它們hide()或show()僅當你雙擊它們時，所以我還放了一個<p>來表示“嘗試雙擊”，只有當你單擊一次時才會顯示。 我把它hidden:true 。 它的顯示默認是隱藏的： display:inline-block

我的html：

<button id="hide">hide</button>
<button id="show" hidden="true">show</button>
<p hidden="true">try double click</p>
<h3 class="txtShow">SHOW</h3>
<h3 class="txtShow">SHOW</h3>
<h3 class="txtShow">SHOW</h3>

我的js：

$("#show, #hide").click(function(){
    $("p").show();
    setTimeout(function(){$("p").hide()}, 800);
});
$("#hide").dblclick(function(){
    $(this).hide();
    $(".txtShow").hide();
    $("#show").show();
});
$("#show").dblclick(function(){
    $(this).hide();
    $(".txtShow").show();
    $("#hide").show();
});

我的CSS：

p {
    display: inline-block;
}

問題是：當我點擊按鈕時，我的<p> display在block ，並且不會在inline-block返回

你能告訴我我哪里出錯了嗎？ 我怎么能糾正它？

Answer 1

您可以使用$('p').css('display', 'inline-block'); 使<p>顯示內聯。

這是您修改后的代碼。 了解有關CSS 的更多信息

 $("#show, #hide").click(function(){ $('p').css('display', 'inline-block'); setTimeout(function(){$("p").hide()}, 800); }); $("#hide").dblclick(function(){ $(this).hide(); $(".txtShow").hide(); $("#show").show(); }); $("#show").dblclick(function(){ $(this).hide(); $(".txtShow").show(); $("#hide").show(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="hide">hide</button> <button id="show" hidden="true">show</button> <p hidden="true">try double click</p> <h3 class="txtShow">SHOW</h3> <h3 class="txtShow">SHOW</h3> <h3 class="txtShow">SHOW</h3>

Answer 2

我不知道你想在這里實現什么，但據我所知，你的代碼沒有你描述的問題， p 元素將返回inline-block 。 請檢查此代碼，因為我使用toggle來顯示/隱藏元素： https : //jsfiddle.net/bhn08puk

順便說一句，我建議您使用 JSFiddle 或 JSBin 等在線代碼片段服務提問，以便我們可以快速了解您的環境，包括 jQuery 版本等。