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

Question

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

我只在双击它们时才将它们设为 hide() 或 show()，所以我还放了一个 <p> 表示 "try to double click"，只有在你点击一次。我做到了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> 在 block 中有 display，而在 [=23= 中不会 return ]

你能告诉我哪里出错了吗？我该如何更正它？

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 元素会 return in inline-block。请检查此代码，因为我使用 toggle instead to show/hide an element: https://jsfiddle.net/bhn08puk

顺便说一句，我建议您使用 JSFiddle 或 JSBin 等在线代码片段服务提问，以便我们可以快速了解您的环境，包括 jQuery 版本等

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

jQuery changes my display inline-block to none

html

javascript

css

jquery

display