Question

一个用于添加，另一个用于删除

<div  class="to-follow col-lg-12 col-md-12 col-sm-12 col-xs-12 "> 
    <button  id="follow" class="btn btn-default btn-block" data-toggle="button">Follow Activities</button>
    <button id="unfollow" class=" hidden btn btn-danger btn-block">Unfollow Activities</button>
</div>

$(".to-follow").click(function() {
    $(this).find('button').toggle();
});

点击后如何使按钮跟随隐藏，然后将显示取消关注。按钮取消关注的功能与

相同

Answer 1

一个用于显示，另一个用于隐藏。为默认情况下要显示的节目分配show class，另一个将获得hide class。

然后你的代码将完成其余的工作。

查看下面的工作示例

＆＃13;

$(".to-follow").click(function() {
    $(this).find('button').toggle();
});

＆＃13;

.show{
  display:block;
}
.hide{
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div  class="to-follow col-lg-12 col-md-12 col-sm-12 col-xs-12 "> 
    <button  id="follow" class="btn btn-default btn-block show" data-toggle="button">Follow Activities</button>
    <button id="unfollow" class=" hidden btn btn-danger btn-block hide">Unfollow Activities</button>
</div>

＆＃13;

Answer 2

你可以像下面这样做。

$("#follow, #unfollow").click(function () {
    $("#follow, #unfollow").toggleClass('hidden');
});

.hidden {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="to-follow col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
    <button id="follow" class="btn btn-default btn-block" data-toggle="button">Follow Activities</button>
    <button id="unfollow" class=" hidden btn btn-danger btn-block hidden">Unfollow Activities</button>
</div>

Answer 3

也许这对你更好

＆＃13;

$("#follow").click(function(){
$(this).html() == "Follow Activities" ? $(this).html("Unfollow Activities") : $(this).html("Follow Activities");
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="to-follow col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
  <button id="follow" class="btn btn-default btn-block" data-toggle="button">Follow Activities</button>
</div>

＆＃13;

Answer 4

jQuery.toggle() - 方法更改添加它的元素的style="display:none;" - 属性，如果存在，则删除它，我想你只是想要更改您在第二个按钮中添加的hidden - 类，然后 - 执行此操作 - 您可以使用：

.toggleClass('hidden'); // instead of .toggle()

希望它有所帮助。

Answer 5

我使用此代码进行制作，以便当您点击Follow Activities该按钮被停用且Unfollow Activities已启用时，反之亦然。

$("#unfollow").click(function() {
  $("#unfollow").hide()
  $("#follow").show();
});  

$("#follow").click(function() {
  $("#follow").hide()
  $("#unfollow").show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div  class="to-follow col-lg-12 col-md-12 col-sm-12 col-xs-12 "> 
  <button  id="follow" class="btn btn-default btn-block" data-toggle="button">Follow Activities</button>
  <button id="unfollow" class=" hidden btn btn-danger btn-block">Unfollow Activities</button>
</div>

如果您愿意，您也可以这样做，以便默认情况下Unfollow Activities按钮被$("#unfollow").hide()禁用，然后再使用public function init() { date_default_timezone_set('Asia/Tehran'); parent::init(); }。

如何在按钮中使用切换

5 个答案: