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()（不带任何参数）将获得按钮的当前文本。我存储它，然后根据它当前设置的内容进行交换，并在＆＃34; HIDE＆＃34;之间切换。或＆＃34;包括＆＃34;。

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

创建两个按钮和两个单击处理程序。第一个显示按钮将显示＆＃34;隐藏＆＃34;按钮，显示内容，并隐藏＆＃34;显示＆＃34;按钮。第二个隐藏按钮将反其道而行。
如果正在显示内容（在函数外部），请设置布尔值。然后，一个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中注释了边距/位置，以便在下面的代码段中显示。

＆＃13;

  $(document).ready(function() {
    $("#toggle").click(function() {
      $("#incl").toggle(500);
      var currentText = $(this).text();
      $(this).text(currentText == "INCLUDES" ? "HIDE" : "INCLUDES");
    });
  });

＆＃13;

#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;*/
}

＆＃13;

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

＆＃13;

Answer 2

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

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

显示/隐藏按钮消失

2 个答案: