Question

当我单击这两个按钮中的一个时，它会同时切换#hide和.contact p。我尝试在（＆＃34;按钮＆＃34;）选择器中添加一个类。

$(document).ready(function(){
  $("#hide").hide();
    $("button").click(function(){
        $("#hide").slideToggle("display");
   });

  $("#contact p").hide();
    $("button").click(function(){
        $("#contact p").slideToggle("display");
   });
});

https://codepen.io/Shalise/pen/BmmEQJ/

Answer 1

您可以将这两个功能添加到所有按钮。这就是为什么当你点击任何按钮时两个函数都被触发的原因。

正如您所说：在按钮上添加class或id以区分它们，并且只为每个按钮添加一个功能

<强> HTML

<button id="first">First</button>
<button id="second">Second</button>

<强> JS

$(document).ready(function(){
  $("#hide").hide();
  $("button#first").click(function(){
    $("#hide").slideToggle("display");
  });

  $("#contact p").hide();
  $("button#second").click(function(){
    $("#contact p").slideToggle("display");
  });
});

Answer 2

您正在查询抓取元素的$（“按钮”）。您将要查询类或ID。例如，我分别将＃btn1和＃btn2的id添加到两个按钮。下面是修改过的JQuery：

 $(document).ready(function(){
  $("#hide").hide();
    $("#btn1").click(function(){
        $("#hide").slideToggle("display");
   });

  $("#contact p").hide();
    $("#btn2").click(function(){
        $("#contact p").slideToggle("display");
   });
});

Answer 3

在每个按钮中使用单独的类或ID。例如：的 HTML

<button class="button-1">First</button> <button class="button-2">Second</button>

<强> JS：

$(document).ready(function(){ $("#hide").hide(); $("button.button-1").click(function(){ $("#hide").slideToggle("display"); }); $("#contact p").hide(); $("button.button-2").click(function(){ $("#contact p").slideToggle("display"); }); });

Answer 4

如果要隐藏这些元素，可以添加一个类，例如class =＆＃34; hidden＆＃34;并显示样式：none而不是使用jQuery hide方法。
您正在使用常规按钮选择器，如果您有每个按钮的特定ID，则可以专门定位它们。
以下是使用slideToggle的好资源：http://api.jquery.com/slidetoggle/

jQuery按钮单击功能切换两个部分

4 个答案: