javascript - 挣扎于 jQuery Toggle 函数

Question

我正在制作乐队简介页面，例如 here.

想法是点击一张照片，该照片将在左侧显示乐队成员简介，覆盖整个乐队的描述。

我对当前代码的问题是，使用切换来显示替代的个人简介意味着当您在不同成员之间单击时，切换状态有时会重置，并且似乎什么都没有发生。每次您单击一张照片，该人的简历就会显示出来。只有当您点击同一个按钮两次或“返回乐队简介”按钮(尚未出现在页面上)时，主简介才会显示。

我当前的代码如下:

jQuery(document).ready(function($) {

$('#gotoben').toggle(function() {
    $('li.gotoben').fadeTo("slow", 1);
    $("#dan").hide();
    $("#ben").show();
    $('li.gotoben').siblings().fadeTo("slow", 0.3);
},
  function () {
    $('li.gotoben').fadeTo("slow", 1);
    $('li.gotoben').siblings().fadeTo("slow", 1);
    $("#ben, #dan").hide();
}); 

$('#gotodan').toggle(function() {
    $('li.gotodan').fadeTo("slow", 1);      
    $("#ben").hide();
    $("#dan").show();
    $('li.gotodan').siblings().fadeTo("slow", 0.3);
},
  function () {
    $('li.gotodan').fadeTo("slow", 1);  
    $('li.gotodan').siblings().fadeTo("slow", 1);
    $("#dan, #ben").hide();
}); 

});

我尝试过使用 .click 功能，但也无法使所有功能 100% 顺利运行。

谁能帮我完成这项工作？

编辑 - 工作代码

这里唯一添加到 patricks 代码的是包含 jQuery stop 函数。

    jQuery(document).ready(function($) {

    $('.bigLeft div:gt(0)').hide();

    $('ol.band li').click(function() {
        var $th = $(this);

            // Hide the current profiles
        $(".bigLeft").children().hide();

        if( $th.hasClass('selected') ) {
            $th.stop(true, false).siblings().fadeTo("slow", 1);
            $th.removeClass('selected');
            $('#theBand').show(); // <-- change the ID to the default
        } else {
            $th.addClass('selected');

              // Grab the ID of the one that was clicked
            var id = $th.attr('id');

              // Fade in the current, and fade the siblings
            $th.stop(true, false).fadeTo("slow", 1)
                   .siblings().removeClass('selected').stop(true, false).fadeTo("slow", 0.3);

              // Show the clicked profile by concatenating the ID clicked with '_profile'
            $("#" + id + "_profile").show();
        }
    }); 

});

Answer 1

我倾向于采取一些不同的方法。

给每个li在 ol.bind 下编号 #ben , #dan等

然后给每个配置文件一个相似的 ID #ben_profile , #dan_profile等

然后利用这种一致性为您带来优势:

$('ol.band li').click(function() {
    var $th = $(this);

        // Hide the current profiles
    $(".bigLeft").children().hide();

    if( $th.hasClass('selected') ) {
        $th.siblings().fadeTo("slow", 1);
        $th.removeClass('selected');
        $('#defaultProfile').show(); // <-- change the ID to the default
    } else {
        $th.addClass('selected');

          // Grab the ID of the one that was clicked
        var id = $th.attr('id');

          // Fade in the current, and fade the siblings
        $th.fadeTo("slow", 1)
               .siblings().removeClass('selected').fadeTo("slow", 0.3);

          // Show the clicked profile by concatenating the ID clicked with '_profile'
        $("#" + id + "_profile").show();
    }
}); 

您可以在这里尝试: http://jsfiddle.net/kDqsT/