Question

我正在尝试做两件事，我真的不知道如何做到这一点...... 我有两个元素，第一个显示，第二个不显示，我想按一个按钮，第一个将消失，第二个将出现，这很简单，这里是我迷路的地方：

我希望在第二次推动时第一个第二个元素将消失，然后第一个重新出现，我只能设法实现第一个div将重新出现，然后第二个将消失。

另一件事，当我按下按钮时，值会改变，当我再次按下它会转回来，例如而不是点击我它会说按这里然后会回头（我在网站上真正想要的是更改点击之间的img）到目前为止，这是我的代码 HTML

<div id="hebeng"></div>
<div id="aboutheb">hello</div>
<div id="abouteng">hello</div>

JS

   $(document).ready(function () {
      $("#hebeng").click(function () {
          $("#aboutheb").slideToggle('slow', function () {
              $("#abouteng").slideToggle('slow');
          });
      });

  });

Fiddle

Answer 1

  $("#hebeng").click(function () {
      $("#aboutheb").slideToggle('slow');
      $("#abouteng").slideToggle('slow');
  });

Fiddle

Answer 2

您应该为2个元素指定相同的类名：

<div id="hebeng">

</div>
<div id="aboutheb" class="toggled">hello</div>
<div id="abouteng"  class="toggled">hello</div>

然后使用这个jQuery代码：

$("#hebeng").click(function () {
    $(".toggled").slideToggle('slow');
});

Working example

Answer 3

试试这个

  $("#hebeng").on("click", function () {
      $("#aboutheb, #abouteng").slideToggle('slow')
  });

Answer 4

您好我编辑了您的JSFiddle代码以检查“click me”文本，如果要将其更改为“按此处”切换，如果没有，则将其更改为“click me”。它非常简单（可能编码得更好）但它有效：

$(document).ready(function () {
   $('.change').text('click me'); 
  $("#hebeng").click(function () {
      $("#aboutheb").slideToggle('slow', function () {
        $("#abouteng").slideToggle('slow');
          if ($('.change:contains("click me")').length > 0) {
              $('.change').text('press here');
            } else {
              $('.change').text('click me'); 
          }
      });
  });
});

使用jQuery显示和隐藏两个元素

4 个答案: