Question

我在网页顶部使用了两个面板：“快速报价”和“客户端登录”。有人可以告诉我如何更改我的代码，以便一次只打开一个面板吗？示例：如果“客户端登录”已打开且用户单击“快速报价”，则“客户端登录”将关闭，“快速报价”将下降。

这是我的网站：http://www.ubspack.com

CODE：

$(document).ready(function(){
 $(".btn-slide").click(function(){
  $("#panel_quote").slideToggle("slow");
  $(this).toggleClass("closeQ"); return false;
 });
 });



  $(document).ready(function(){
 $(".btn-slide2").click(function(){
  $("#panel_login").slideToggle("slow");
  $(this).toggleClass("closeL"); return false;
 });
});

Answer 1

尝试类似：

    $(document).ready(function(){
     $(".btn-slide").click(function(){
          return Toggle()
     });

     $(".btn-slide2").click(function(){
          return Toggle()
     });

    });

function Toggle() {
     $(".btn-slide1").toggleClass("closeQ");
     $(".btn-slide2").toggleClass("closeL");
}

调用Toggle()会同时切换两个类 - 然后只是确保一个类已应用于开始的类...

Answer 2

您只需关闭点击处理程序中的其他面板。

$(document).ready(function(){
  $(".btn-slide").click(function(){
    $("#panel_quote").slideToggle("slow");
    $(this).toggleClass("closeQ"); 
    $("#panel_login").slideUp();
    return false;
  });

  $(".btn-slide2").click(function(){
    $("#panel_login").slideToggle("slow");
    $(this).toggleClass("closeL"); 
    $("#panel_quote").slideUp();
    return false;
  });
});

切换两个下拉面板

2 个答案: