javascript - 如何切换此按钮以多次显示和隐藏

Question

我正在尝试创建一个小型实时聊天应用程序，我需要“聊天管理员”按钮在单击时打开聊天容器，并在再次单击时隐藏，就像切换效果一样。我尝试过使用，jQuery toggleClass但没有正确实现。

提前致谢。

$(document).ready(function(){
    var chatbtn = $('.ph-chat-button');

    wrap = document.createElement('div');
    chatbtn.append('<span><i clas="fa fa-chat"></i> Chat Admin</span>');

    chatbtn.on('click',function(ev){
        ev.preventDefault();
        $(this).empty();
        $(this).append('<span><i clas="fa fa-chat"></i> Close Chat</span>');
        createLogin();
        $(this).removeClass('ph-chat-button').addClass('close-chat');

        if($(this).hasClass('close-chat')){
            $('.close-chat').click(function(){
                $('.loginContainer').remove();
                $(this).empty();
                $(this).append('<span><i clas="fa fa-chat"></i> Chat Admin</span>');
                chatbtn.toggleClass('close-chat ph-chat-button').parent().next().slideToggle();
            });
        }
    });

    $('.chat-login').on('submit',function(ev){
            ev.preventDefault();
            data = $(this).serialize();
            console.log(data);
    });

    function createLogin(){
        wrap.setAttribute('class','loginContainer animated bounceIn');
        wrap.innerHTML = "<div class='box'>\
        <div class='box-header'><div class='box-title'>Login</div></div>\
        <div class='box-body'>\
        <p class='help-block'> Enter your registered email address and click start chat to begin </p>\
        <form method='post' action='chat.php' class='chat-login'>\
          <div class='form-group col-md-12'>\
            <label class='control-label'>Email</label>\
            <input type='email' id='buyer_email' name='email' style='width:100%;margin-bottom:5%' class='form-control' placeholder='Email Address' required/>\
          </div>\
          <div class='text-center'><button class='btn btn-md btn-success btn'>Start Chat</button></div\
        </form>\
        <div class='js-alert-box'></div>\
        </div></div>";
    }
    document.body.appendChild(wrap);
});

标签： javascriptjquery

Answer 1

试试这个方法。

var _on = false; //global flag

$(document).ready(function(){
  var chatbtn = $('.ph-chat-button');
  chatbtn.on('click',function(ev){
    ev.preventDefault();
    _on = !_on;
    if(_on){
      // Open the chat
    }else{
      // Close the chat
    }
  });
});