jQuery单击仅在切换时起作用一次 [英] Jquery click only work once on toggle

查看:98
本文介绍了jQuery单击仅在切换时起作用一次的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用以下脚本根据div的状态显示不同的背景.

I am using the following script to show a different background depending on the state of the div.

不展开时显示加号(+)",展开时不显示背景图像(不显示任何内容).

When it is not expanded it shows the "plus (+)" sign, while when is expanded it does not have background image (does not shows anything).

那里的问题是只能工作一次,而我不知道为什么.

The problem there is that only work once, and I dont know why.

这是代码:

编辑(添加HTML)!

EDIT (added HTML)!

HTML:

<body>
    <section>
        <div class="wrapper wf">
            <ul id="Parks" class="just">
<!--------------- PRODUCT -->
                <li class="mix" href="#therapy_vital" >
                <div class="meta name">
                        <div class="img_wrapper">
                            <img src="images/spa/masaje/.jpg" onload="imgLoaded(this)"/>
                        </div>
                        <div class="titles">
                            <h2>TITLE</h2>
                        </div>
                    </div>
                    <!-- Expand -->
                    <div href="#therapy_vital" class="nav-toggle"></div>
                    <div id="therapy_vital" style="display:none">
                <article class="ac-small">
                 SUBCONTENT<br><br><br><br><br><br><br><br><br><br><br><br>
                 </article>
                </div>
                </li> 
<!--------------- PRODUCT -->
                <li class="mix" href="#therapy_natur" >
                <div class="meta name">
                        <div class="img_wrapper">
                            <img src="images/spa/masaje/.jpg" onload="imgLoaded(this)"/>
                        </div>
                        <div class="titles">
                            <h2>TITLE</h2>
                        </div>
                    </div>
                    <!-- Expand -->
                    <div href="#therapy_natur" class="nav-toggle"></div>
                    <div id="therapy_natur" style="display:none">
                <article class="ac-small">
                 SUBCONTENT<br><br><br><br><br><br><br><br><br><br><br><br>
                 </article>
                </div>
                            </li> 
</ul>
</div>                      
        </section>
    </body>

JS:

$(document).ready(function() {
    $('.meta').click(function() {
        $(this).css('background', 'none');
    });
    $('.mix').click(function() {
        var collapse_content_selector = $(this).attr('href');
        var toggle = $(this);
        $('.meta').click(function() {
            $(this).css('background', 'url(images/arrow_down.png) no-repeat scroll 95% 97% transparent');
        });
        $(collapse_content_selector).toggle(function() {});
    });
});

(.mix值使Div扩展,.meta类切换到不同背景).

(The .mix value makes the Div expands, and the .meta class switch to different background).

有任何线索吗?

EDIT2(实时示例)

EDIT2 (Live example)

http://anubisfiles.com/test/test.html

(由于我对jsFiddle并不是很熟悉,我更愿意向您展示它托管在网站上).

(Due I am not really familiar with jsFiddle, I prefer to show you it hosted on a website).

谢谢!

推荐答案

$('.mix').click(function() {
        var collapse_content_selector = $(this).attr('href');
        var toggle = $(this);

        $(this).find('.meta').css('background', 'url(images/arrow_down.png) no-repeat scroll 95% 97% transparent');
        $(collapse_content_selector).toggle(function() {});
    });

尝试一下

这篇关于jQuery单击仅在切换时起作用一次的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆