javascript - 显示/隐藏按钮消失

Question

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

当我运行此场景时，按钮消失。 我想要发生的是回显“包含”的按钮必须回显“隐藏” 我正在尝试制作一个显示项目详细信息然后隐藏它们的按钮。

Answer 1

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

您还可以执行以下任一操作:

• 创建两个按钮和两个点击处理程序。第一个显示按钮将显示“隐藏”按钮，显示内容，并隐藏“显示”按钮。第二个隐藏按钮将起到相反的作用。
• 如果正在显示内容(在函数外部)，则设置一个 bool 值。然后，一个 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>