jQuery将我的显示内联块更改为none

Question

>我有一个问题，我首先尝试制作一个按钮来隐藏文本，并隐藏自己，然后显示一个名为"show"的新按钮。

只有当您双击它们时，我才使它们hide()或show()，因此我还放置了一个<p>说"尝试双击"，仅当您单击一次时才会显示。我把它hidden:true. 默认情况下，它的显示是隐藏的：display:inline-block

我的网页：

<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>displayblock，并且不会返回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版本等。