通过网址打开聊天

时间：2015-06-25 20:19:33

标签： javascript php html

我正在使用PHP LIVE CHAT脚本，我想通过点击链接打开聊天。

这是我尝试过的：

ATTEMPT 1：

HTML： 

<a class="customer-chat-button-toggle button large" id="openchat">LIVE CHAT</a>

JS： 

<script>
$(function(){
    $('#openchat').click(function(){
       $('#customer-chat-widget').toggle(); 
    });
});
</script>

ATTEMPT 2：

HTML： 

<a class="customer-chat-button-toggle button large">LIVE CHAT</a>

有人能帮助我吗？目标是通过单击链接而不是单击白色箭头来打开聊天（div）。

聊天代码WIDGET 

<div id="customer-chat-widget" class="customer-chat customer-chat-widget loading-screen">
        <div class="customer-chat-header">
            <div class="customer-chat-header-title"><?php echo $vars['ui']['chatHeader'] ?></div>
            <div class="customer-chat-header-indicator"></div>

            <div id="customer-chat-button-close" class="customer-chat-header-button mobile-only">
                <i class="icon-remove icon-white"></i>
            </div>

            <div id="customer-chat-button-toggle" class="customer-chat-header-button desktop-only">
                <i class="icon-chevron-down icon-white"></i>
                <i class="icon-chevron-up icon-white"></i>
            </div>

            <div id="customer-chat-button-settings" class="customer-chat-header-button"><i class="icon-wrench icon-white"></i></div>

            <div class="customer-chat-header-menu">
                <div class="customer-chat-header-menu-triangle"></div>

                <!-- Settings -->

                <a href="#" id="customer-chat-setting-toggle-sound" class="customer-chat-toggle-sound"><i class="icon-music"></i> <div><?php echo $vars['ui']['toggleSoundLabel'] ?></div></a>
                <a href="#" id="customer-chat-setting-toggle-scroll" class="customer-chat-toggle-scroll"><i class="icon-arrow-down"></i> <div><?php echo $vars['ui']['toggleScrollLabel'] ?></div></a>
                <a href="#" id="customer-chat-setting-toggle-emots" class="customer-chat-toggle-emots"><i class="icon-heart"></i> <div><?php echo $vars['ui']['toggleEmoticonsLabel'] ?></div></a>
                <a href="#" id="customer-chat-setting-toggle-show" class="customer-chat-toggle-show desktop-only"><i class="icon-resize-full"></i> <div><?php echo $vars['ui']['toggleAutoShowLabel'] ?></div></a>
                <a href="#" id="customer-chat-toggle-fs" class="desktop-only"><i class="icon-fullscreen"></i> <div><?php echo $vars['ui']['toggleFullscreenLabel'] ?></div></a>

                <!-- Actions -->

                <a href="#" id="customer-chat-action-end-chat">
                    <i class="icon-off"></i>
                    <div><?php echo $vars['ui']['endChatLabel'] ?></div>
                </a>

                <div id="customer-chat-action-end-chat-confirmation" class="item">
                    <i class="icon-off"></i>
                    <div>
                        <?php echo $vars['ui']['endChatConfirmQuestion'] ?>
                        <a href="#" id="customer-chat-action-end-chat-confirm" class="customer-chat-content-button customer-chat-content-button-inline"><?php echo $vars['ui']['endChatConfirm'] ?></a>
                        <a href="#" id="customer-chat-action-end-chat-cancel" class="customer-chat-content-button customer-chat-content-button-inline"><?php echo $vars['ui']['endChatCancel'] ?></a>
                    </div>
                </div>
            </div>
        </div>

        <div id="customer-chat-content-login-form" class="customer-chat-content">
            <div class="customer-chat-content-info">
            </div>
            <div id="customer-chat-select-avatar">
                <a href="#" class="prev-avatar customer-chat-content-button customer-chat-content-button-inline"><i class="icon-chevron-left icon-white"></i></a>
                <i class="selected-avatar customer-chat-content-message-avatar"></i>
                <a href="#" class="next-avatar customer-chat-content-button customer-chat-content-button-inline"><i class="icon-chevron-right icon-white"></i></a>
            </div>
            <div class="customer-chat-content-message-input">
                <input id="customer-chat-login-name" type="text" class="customer-chat-content-message-input-field" placeholder="<?php echo $vars['ui']['contactNameLabel'] ?>" />
            </div>
            <div class="customer-chat-content-message-input">
                <input id="customer-chat-login-mail" type="text" class="customer-chat-content-message-input-field" placeholder="<?php echo $vars['ui']['contactMailLabel'] ?>" />
            </div>
            <div class="customer-chat-content-row">
                <a href="#" id="customer-chat-login-start" class="customer-chat-content-button"><?php echo $vars['ui']['startLabel'] ?> <i class="icon-circle-arrow-right icon-white" style="margin: 3px 0 0 3px;"></i></a>
            </div>
        </div>

        <div id="customer-chat-content-chat-box" class="customer-chat-content chat-box">
            <div class="customer-chat-content-messages">
                <div class="customer-chat-content-messages-wrapper"></div>
            </div>

            <div class="customer-chat-content-message-input">
                <div class="customer-chat-emots-menu">
                    <div class="customer-chat-header-menu-triangle"></div>

                    <div class="emots-wrapper">
                        <a href="#" data-emot=":)" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-1.png') ?>" alt=":)" title=":)" /></a>
                        <a href="#" data-emot=";)" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-2.png') ?>" alt=";)" title=";)" /></a>
                        <a href="#" data-emot=":(" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-3.png') ?>" alt=":(" title=":(" /></a>
                        <a href="#" data-emot=":D" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-4.png') ?>" alt=":D" title=":D" /></a>
                        <a href="#" data-emot=":P" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-5.png') ?>" alt=":P" title=":P" /></a>
                        <a href="#" data-emot="=)" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-6.png') ?>" alt="=)" title="=)" /></a>
                        <a href="#" data-emot=":|" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-7.png') ?>" alt=":|" title=":|" /></a>
                        <a href="#" data-emot="=|" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-8.png') ?>" alt="=|" title="=|" /></a>
                        <a href="#" data-emot=">:|" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-9.png') ?>" alt=">:|" title=">:|" /></a>
                        <a href="#" data-emot=">:D" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-10.png') ?>" alt=">:D" title=">:D" /></a>

                        <a href="#" data-emot="o_O" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-11.png') ?>" alt="o_O" title="o_O" /></a>
                        <a href="#" data-emot="=O" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-12.png') ?>" alt="=O" title="=O" /></a>
                        <a href="#" data-emot="<3" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-13.png') ?>" alt="<3" title="<3" /></a>
                        <a href="#" data-emot=":S" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-14.png') ?>" alt=":S" title=":S" /></a>
                        <a href="#" data-emot=":*" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-15.png') ?>" alt=":*" title=":*" /></a>
                        <a href="#" data-emot=":$" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-16.png') ?>" alt=":$" title=":$" /></a>
                        <a href="#" data-emot="=B" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-17.png') ?>" alt="=B" title="=B" /></a>
                        <a href="#" data-emot=":-D" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-18.png') ?>" alt=":-D" title=":-D" /></a>
                        <a href="#" data-emot=";-D" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-19.png') ?>" alt=";-D" title=";-D" /></a>
                        <a href="#" data-emot="*-D" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-20.png') ?>" alt="*-D" title="*-D" /></a>
                    </div>
                </div>

                <div class="typing-indicator"><i class="icon icon-pencil"></i></div>
                <div class="input-wrapper">
                    <input type="text" id="customer-chat-message-input" class="customer-chat-content-message-input-field" placeholder="<?php echo $vars['ui']['chatInputLabel'] ?>" />
                </div>
                <div class="customer-chat-content-message-emots-button"></div>

                <a id="chat-send-button" href="#" class="customer-chat-content-button mobile-only"><i class="icon-white icon-arrow-right"></i></a>
            </div>
        </div>

        <div id="customer-chat-content-contact-form" class="customer-chat-content">
            <div class="customer-chat-content-info">
                <?php echo $vars['ui']['contactInfo'] ?>
            </div>
            <div class="customer-chat-content-message-input">
                <input id="customer-chat-contact-name" type="text" class="customer-chat-content-message-input-field" placeholder="<?php echo $vars['ui']['contactNameLabel'] ?>" />
            </div>
            <div class="customer-chat-content-message-input">
                <input id="customer-chat-contact-mail" type="text" class="customer-chat-content-message-input-field" placeholder="<?php echo $vars['ui']['contactMailLabel'] ?>" />
            </div>
            <div class="customer-chat-content-message-input">
                <textarea id="customer-chat-contact-message" class="customer-chat-content-message-input-field" placeholder="<?php echo $vars['ui']['contactQuestionLabel'] ?>"></textarea>
            </div>
            <div class="customer-chat-content-row">
                <a href="#" id="customer-chat-contact-send" class="customer-chat-content-button"><?php echo $vars['ui']['contactSendLabel'] ?> <i class="icon-circle-arrow-right icon-white" style="margin: 3px 0 0 3px;"></i></a>
            </div>
        </div>

        <div id="customer-chat-content-loading" class="customer-chat-content">
            <img src="<?php echo $app->asset('img/loading.gif') ?>"class="customer-chat-content-loading-icon" />
        </div>

        <div id="customer-chat-content-info" class="customer-chat-content">
            <div id="customer-chat-info-text" class="customer-chat-content-info"></div>
            <div class="customer-chat-content-row">
                <a href="#" id="customer-chat-info-back" class="customer-chat-content-button"><i class="icon-circle-arrow-left icon-white" style="margin: 3px 3px 0 0;"></i> <?php echo $vars['ui']['backLabel'] ?></a>
            </div>
        </div>
    </div>

    <a id="mobile-widget" class="customer-chat-header" href="<?php echo $app->path('Widget:mobileView') ?>" target="_top"><i class="icon-white icon-comment"></i></a>

WHITE ARROW：

link

1 个答案:

答案 0 :(得分：0)

隐藏您的聊天<div>，仅在您点击#openChat按钮时显示。

要隐藏元素，请使用$(element).hide();

要显示元素，请使用$(element).show();

相关问题
最新问题