仅使用链接进行Jquery切换

时间:2012-01-13 16:04:29

标签: jquery toggle

我已经编写了一个切换功能,可以在点击时更改内容和图像大小,但一切正常,但我只能使用更多按钮来解决如何触发切换的问题。当您点击指南框中的任何位置时,切换将会触发,但是我想在副本中添加链接,但是当您点击这些链接时它会关闭它。

我想我可能会对父母,下一个等有点困惑

非常感谢任何帮助。

$(document).ready(function () {

$('.guide').click(function () {

    var text = $(this).children('.guidebox');

    if (text.is(':hidden')) {
        text.slideDown('200');
        $(this).find('.toggle').html('<< Less');                        
        //$(this).children('.myDiv2').append( $('.myDiv1>p') );
        $(".myDiv2", this).append( $(".myDiv1>p", this) );
        $(this).children('img.guideImage').animate({
            width: '412px',
            height: '275px'
          }, 500, function() {
          });   



    } else {
        text.slideUp('200');
        $(this).find('.toggle').html('More >>');
    //  $(this).children('.myDiv1').append( $('.myDiv2>p') );
        $(".myDiv1", this).append( $(".myDiv2>p", this) );  
        $(this).children('img.guideImage').animate({
            width: '198px',
            height: '132px'
          }, 500, function() {
          });   
    }

});

});

这是一个演示 http://jsfiddle.net/ktcle/CWXqS/

2 个答案:

答案 0 :(得分:1)

$('.guide a').click(function (e) {
e.preventDefault();
}

添加e.preventDefault()

编辑:

我不确定我是否理解你,但我已经改变了你的剧本 http://jsfiddle.net/CWXqS/1/

答案 1 :(得分:0)

在链接上使用click事件而不是带有类指南的div会不容易吗? 如此改变:

$('.guide').click(

为:

$('.toggle').click(

请记住在函数结束时返回false,否则浏览器将尝试离开页面或重新加载它,因为它是超链接。

例如,使用链接触发事件,脚本将如下所示

$('.toggle').click(function () {

        var parentDiv = $(this).parent();
        var text = $(parentDiv).children('.guidebox');  
 //...
        return false;
};