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

Question

当我单击这两个按钮之一时，它会同时切换#hide 和.contact p。我尝试将 class 添加到 ("button") 选择器。

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

您正在查询获取元素的 $("button") 。您将想要查询 class 或 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

在每个按钮中使用单独的 class 或 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 例如 class="hidden" 并设置它显示的样式：none 而不是使用 jQuery 隐藏方法。
您使用的是通用按钮选择器，如果您对每个按钮都有特定的 ID，则可以专门针对它们。
这里有一个很好的使用 slideToggle 的资源：http://api.jquery.com/slidetoggle/

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

jQuery button click function toggles both sections

javascript

jquery

button

slidetoggle