jQuery 再次点击时切换隐藏

Question

编辑：我确实希望在打开另一个签名时隐藏其他签名。

我正在为我的论坛签名设置一个开关，我通过开关得到了我想要的，但我不知道如何在您再次单击开关时隐藏它。

function toggleSig(divId) {
   $('.forum_signature').each(function(index) {
      if ($(this).attr("id") == divId) {
          $(this).show(200);
      }
      else {
          $(this).hide(600);
      }
   });
}

https://jsfiddle.net/4yg83kru/1/

关于如何在再次单击时隐藏切换的任何想法？（我是 JS/jQuery 领域的新手）

Answer 1

您可以使用切换事件：

function toggleSig(divId) {
    $('.forum_signature').each(function(index) {
        if ($(this).attr("id") == divId) {
            $(this).toggle(200);
        }

    });
}

注意：这不是唯一的方法，但在我看来这对您来说是一种简单的方法。

这个只打开被点击的那个：

function toggleSig(divId) {
   $('.forum_signature').hide()
    $('.forum_signature').each(function(index) {
        if ($(this).attr("id") == divId) {
            $(this).show(200);
        }

    });
}

你可以在这里查看：

https://jsfiddle.net/5xkvew4k/

Answer 2

您可以将显示方法更改为切换，这样点击的 "id" 将切换，另一个如果可见则将隐藏

function toggleSig(divId) {
    $('.forum_signature').each(function(index) {
        if ($(this).attr("id") == divId) {
            $(this).toggle(200);
        }
        else {
            $(this).hide(600);
        }
    });
}

https://jsfiddle.net/4yg83kru/2/

Answer 3

传入项目的id并循环遍历所有项目并做一些事情看起来有点脏。您可以使您的代码更通用一些。给你的锚标签一个 css class。

<a class="myA">Toggle Signature</a>
<div id="1" class="forum_signature" style="display:none;">
    Signature
</div>
<a class="myA">Toggle Signature</a>
<div id="2" class="forum_signature" style="display:none;">
    Signature 2
</div>

现在 javascript 来处理隐藏和显示

$(function(){

  $(".myA").click(function(e){
     e.preventDefault();

     var c= $(".forum_signature:visible"); //Get currently visible one       
     $(this).next().toggle(); //Show the current one
     c.hide(); // Hide the previously visible one        
  });  

});

Here 是一个有效的 jsbin 示例

jQuery 再次点击时切换隐藏

jQuery Toggle hide when clicked again

jquery

toggle