时间戳

首页 > 解决方案 > jQuery 将我的显示内联块更改为无

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

问题描述

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

我制作了它们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

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

标签： javascriptjqueryhtmlcssdisplay

解决方案

您可以使用 $('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>

推荐阅读