javascript - jQuery 将我的显示内联 block 更改为无

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>

我的代码:

$("#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>