Div出现onclick,消失onclick

时间:2016-07-22 21:53:53

标签: javascript jquery

<bean id="smtpSession" class="org.springframework.jndi.JndiObjectFactoryBean">
        <property name="jndiName" value="java:jboss/example/jndiName"/>
    </bean>
<bean id="javaMailSenderImpl" class="org.springframework.mail.javamail.JavaMailSenderImpl">
        <property name="session" ref="smtpSession"/>
        <property name="defaultEncoding" ref="UTF-8"/>
</bean>

<bean id="velocityEngine" class="org.springframework.ui.velocity.VelocityEngineFactoryBean">
        <property name="velocityProperties">
            <props>
                <prop key="input.encoding">UTF-8</prop>
                <prop key="output.encoding">UTF-8</prop>
                <prop key="response.encoding">UTF-8</prop>
                <prop key="resource.loader">file</prop>
                <prop key="file.resource.loader.class">org.apache.velocity.runtime.resource.loader.FileResourceLoader
                </prop>
                <prop key="file.resource.loader.path">${relative.path}/email-templates</prop>
                <prop key="file.resource.loader.cache">false</prop>                    
            </props>
        </property>
    </bean>

我在这里有一个点击功能。当我点击.dropTitle时,.columnCenter ul ul显示'block'。一旦我再次单击.dropTitle,它将如何切换到display:none;?

我希望能够在display:block to display:none点击.dropTitle之间来回切换。

所有帮助将不胜感激,谢谢!

3 个答案:

答案 0 :(得分:5)

只需使用toggle

$(function() {
    $('.dropTitle').click(function() {
        $('.columnCenter ul ul').toggle();
    });                        
});

Working example.

答案 1 :(得分:0)

在这里使用实用程序类可能更容易,例如:

.is--hidden {
    display: none;
}        

然后在点击时切换该类:

$('.dropTitle').click(function() {
    $(this).toggleClass('is--hidden')
}

答案 2 :(得分:-1)

我不仅会使用.toggle(),还会使用.on() ......

$(function() {
    $(document).on('click', '.droptitle', function() {
        $('.columnCenter ul ul').toggle();
    });                        
});