Question

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

仅当您双击它们时，我才将它们制作为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版本等。

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

2 个答案: