0

我有一些在单击链接时出现的 div，但我正在努力做到这一点，以便当您单击第二个链接弹出时，任何打开的链接都将在新链接打开之前关闭。一次只能打开一个。

js...

<script>
    $.fn.slideFadeToggle = function (easing, callback) {
    return this.animate({
        opacity: 'toggle',
        width: 'toggle'
    }, "fast", easing, callback);
};

$(function () {
    function select($link) {
        $link.addClass('selected');
        $($link.attr('href')).slideFadeToggle(function () {});
    }

    function deselect($link) {
        $($link.attr('href')).slideFadeToggle(function () {
            $link.removeClass('selected');
        });
    }

    $('.contact').click(function () {
        var $link = $(this);
        if ($link.hasClass('selected')) {
            deselect($link);
        } else {
            select($link);
        }
        return false;
    });

    $('.close').live('click', function () {
        deselect();
        return false;
    });
});

                            </script>

div...

 <div id='did_{$page_trackid}'  class='arrow_box pop_{$page_trackid}' style=''>  <img src='".$info4['Image']."' class='subtext_img'>
                                                    <h2 class='subtext'><a href='http://www.xxxxxxx.co.uk/dnb/".$info2['username']."'>".$info2['username']."</a></h2>
                                                    <p class='subtext'>".$info3['user_title']."</p>
                                                    <p class='subtext'><a href='".$info3['website_link']."' target='_blank'>".$info3['website_link']."</a>

                                                    </p>

                                                    </div>

                 <div id='did_2_{$page_trackid}'  class='arrow_box2 pop_stats_{$page_trackid}' style=''>  
                                                    <h2 class='subtext'>Stats</h2><br />
                                                    <p class='subtext'>Plays: 1m <br />
                                                                    Downloads: 527, 046

                                                    </p>

                                                    </div>

链接...

<div style='position: absolute; z-index: 2; padding-top: 30px; padding-left: 699px;'>

                <a href='#did_{$page_trackid}' class='contact' ><img style='height: 20px;' alt='Posted by' src='http://www.xxxxxxxxxx.co.uk/play1/skin/user-profile2.png' style=''></a> 
                </div>

                <div style='position: absolute; z-index: 1; width: 20px; height: 20px; padding-top: 50px; padding-left: 699px;'>
                <a href='#did_2_{$page_trackid}' class='contact'><img style='height: 20px;' alt='Track stats' src='http://www.xxxxxxxx.co.uk/play1/skin/stats.png' style=''></a>
                </div>

我试过用

function select($link) {
$link.addClass('selected');
$('.arrow_box:visible').slideFadeToggle(function () {});
$($link.attr('href')).slideFadeToggle(function () {});

}

但那是错误的，一个弹出重叠另一个。我有 2 个 div 类（每个 1 个）所以我尝试添加

$('.arrow_box2:visible').slideFadeToggle(function () {});

但这也行不通。

单击链接以打开新弹出窗口时，我是否以正确的方式关闭任何打开的箭头框或箭头框2？

谢谢

4

1 回答 1

0

我将您的 html 和 js 复制到 jsfiddle 并修改了select方法。在这里尝试一下：

http://jsfiddle.net/mchail/wHyfK/1/

我相信这现在可以满足您的要求。关键是在切换新的“选定”窗格（以显示它）之前切换任何显示的窗格（以隐藏它们）。

希望这可以帮助。

于 2013-04-19T00:36:16.180 回答