显示/隐藏按钮消失

Show/hide buttons disappear

本文关键字：消失 按钮 隐藏 显示      更新时间：2023-09-26

$(document).ready(function() {
  $("button").click(function() {
    $("#incl").toggle(500);
    $(this).hide();
    $("button").text('hide');
  });
});
#incl {
  display: none;
}
.incl {
  position: absolute;
  z-index: 800;
  background-color: #00689C;
  text-align: left;
  padding: 0 5px 5px 5px;
  color: #ffffff;
  font-size: 1.25em;
  border-radius: 3px;
  line-height: 1.5em;
  margin: -197px -10px 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $("button").click(function() {
      $("#incl").toggle(500);
      $(this).hide();
      $("button").text('hide');
    });
  });
</script>
<button>INCLUDES</button>
<div id="incl">
  <ul class="incl">
    <li>bla bla bla</li>
    <li>bla ti bla</li>
    <li>bla bla</li>
  </ul>
</div>

当我运行这个场景时，按钮消失了。我希望发生的是echo"includes"的按钮必须echo"hide"我正在尝试制作一个显示项目详细信息的按钮，然后隐藏它们。

这应该是您想要的。使用$(this).text()(不带任何参数(将获得按钮的当前文本。我存储它，然后根据它当前的设置进行交换，并在"隐藏"或"包括"之间切换。

您也可以执行以下任何操作：

  • 创建两个按钮和两个单击处理程序。第一个显示按钮将显示"隐藏"按钮，显示内容，并隐藏"显示"按钮。第二个隐藏按钮将起相反的作用
  • 如果正在显示内容(在函数之外(，则设置布尔值。然后，一个if/else语句将确定它是否已设置：
if ( contentShown )
{
    $('#content').hide();
    $('#button').text('Show');
}
else
{
    $('#content').show();
    $('#button').text('Hide');
}
contentShown = !contentShown;  //Invert contentShown (Set it to true if false, or false if true)

请注意，我注释掉了css中的边距/位置，将其显示在下面的片段中。

  $(document).ready(function() {
    $("#toggle").click(function() {
      $("#incl").toggle(500);
      var currentText = $(this).text();
      $(this).text(currentText == "INCLUDES" ? "HIDE" : "INCLUDES");
    });
  });
#incl {
  display: none;
}
.incl {
  /*position: absolute;*/
  z-index: 800;
  background-color: #00689C;
  text-align: left;
  padding: 0 5px 5px 5px;
  color: #ffffff;
  font-size: 1.25em;
  border-radius: 3px;
  line-height: 1.5em;
  /*margin: -197px -10px 0 0;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<button id="toggle">INCLUDES</button>
<div id="incl">
  <ul class="incl">
    <li>bla bla bla</li>
    <li>bla ti bla</li>
    <li>bla bla</li>
  </ul>
</div>

按钮消失的原因是这一行：

$(this).hide();

在单击处理程序内部。

此外，你的类incl有边距：-197px-10px 0 0，这意味着在显示内容时需要对此进行调整。

在您的点击处理程序中，您可以测试按钮文本，以决定要执行的正确操作：

$(document).ready(function () {
  $("button").click(function () {
    $("#incl").toggle(500);
    var sign = '-';
    var txt = 'INCLUDES';
    //
    // According to the button text you can decide
    // the next button text and if you need
    // to correct the margings of your element
    // adding or removing for the margins.
    //
    if (this.textContent == 'INCLUDES') {
      sign = '+';
      txt = 'hide';
    }
    $('.incl').animate({"margin-top": sign + "=197px", "margin-right": sign + "=10px"}, 500)
    $("button").text(txt);
  });
});
#incl {
  display: none;
}
.incl {
  position: absolute;
  z-index: 800;
  background-color: #00689C;
  text-align: left;
  padding: 0 5px 5px 5px;
  color: #ffffff;
  font-size: 1.25em;
  border-radius: 3px;
  line-height: 1.5em;
  margin: -197px -10px 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>INCLUDES</button>
<div id="incl">
    <ul class="incl">
        <li>bla bla bla</li>
        <li>bla ti bla</li>
        <li>bla bla</li>
    </ul>
</div>

相关文章：