Question

在点击事件上创建一个应用程序并且该函数不在div的内部元素上工作，在父div html上正常工作

<div class="chat_wrapper">
   <span class="fa fa-minus minimize"></span>
        <div class="module" id="45-module" style="height: 316px;">
            <div class="top-bar">
                <div class="left">
                    <span class="icon typicons-message"></span>
                    <h1 class="username">rudra-chat</h1>
                </div>
                <div class="right">
                    <span class="fa fa-plus maximize" style="display:none"></span>
                </div>
            </div>
            <ol name="log" id="45-log" class="discussion"></ol>
            <div class="message" id="45-msg">
                <input type="text" name="message" id="message" onkeypress="sendmessage(this,event);">
            </div>
        </div>
    </div>

我将这个用于onlick

$(document).ready(function(){
    $('.minimize').click(function() {
        alert('sadg');
        $('.module').animate({ height: '30px' }, 500);
        $('.minimize').hide();
        $('.maximize').show();  
    });

    $('.maximize').click(function() {
        $('.module').animate({ height: '316px' }, 500);
        $('.minimize').show();
        $('.maximize').hide();  
    });
});

css代码是

.chat_wrapper {
    bottom: 0;
    position: fixed;
    right: 167px;
}
.module {
    float: left;
    margin-right: 2px;
    width: 300px;
}
.top-bar:before {
    animation: 1s ease 0s alternate none infinite running pulse;
    background: radial-gradient(#ffffff, #000000) repeat scroll 0 0 rgba(0, 0, 0, 0);
    bottom: -100%;
    content: "";
    left: 0;
    opacity: 0.25;
    position: absolute;
    right: 0;
    top: -100%;
}
.top-bar {
    background: none repeat scroll 0 0 #666;
    color: white;
    overflow: hidden;
    padding: 0.5rem;
    position: relative;
}

但它不起作用没有错误我在 chat_wrapper 点击事件上尝试了同样的功能，这是正常的

Answer 1

好的，我已经解决了。这背后的问题是append（）。我正在追加div，因为这是一个聊天应用程序，我认为这不起作用，所以我创建了一个像这样的简单的JavaScript函数

function minimize(e)
{
   $(e).parents('.module').animate({
            height: '30px'
        }, 500);
        $(e).hide();
        $(e).next('.maximize').show();


}
function maximize(e)
{
   $(e).parents('.module').animate({
            height: '310px'
        }, 500);
        $(e).hide();
        $(e).prev('.minimize').show();


}

和html一样

<div class="chat_wrapper">
   <div class="module" id="45-module" style="height: 316px;">
            <div class="top-bar">
                <div class="left">
                    <span class="icon typicons-message"></span>
                    <h1 class="username">rudra-chat</h1>
                </div>
                <div class="right">
 <span onclick="minimize(this)" id="minimize" class="fa fa-minus minimize"></span>
                    <span onclick="maximize(this)" style="display:none" class="fa fa-plus maximize"></span>
                </div>
            </div>
            <ol name="log" id="45-log" class="discussion"></ol>
            <div class="message" id="45-msg">
                <input type="text" name="message" id="message" onkeypress="sendmessage(this,event);">
            </div>
        </div>
    </div>

jquery点击功能在div内部不起作用，在外部div上工作

1 个答案: