与 jQuery Toggle 功能作斗争

Question

我正在制作一个乐队简介页面，例如 此处。

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

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

我当前的代码如下：

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

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

为 ol.bind 下的每个 li 指定 ID #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/

Answer 2

这是一种使用点击功能来完成此操作的方法。

var current_loc = '';
jQuery(document).ready(function($) {

    $('#gotoben').click(function() {
        if(current_loc != 'ben'){
            current_loc = 'ben';
            $('li.gotoben').fadeTo("slow", 1);
            $("#dan").hide();
            $("#ben").show();
            $('li.gotoben').siblings().fadeTo("slow", 0.3);
        }else{
            current_loc = '';
            $('li.gotoben').fadeTo("slow", 1);
            $('li.gotoben').siblings().fadeTo("slow", 1);
            $("#ben, #dan").hide();
        }
    }); 

    $('#gotodan').click(function() {
        if(current_loc != 'dan'){
            current_loc = 'dan';
            $('li.gotodan').fadeTo("slow", 1);      
            $("#ben").hide();
            $("#dan").show();
            $('li.gotodan').siblings().fadeTo("slow", 0.3);
        }else{
            current_loc = '';
            $('li.gotodan').fadeTo("slow", 1);  
            $('li.gotodan').siblings().fadeTo("slow", 1);
            $("#dan, #ben").hide();
        }
    });
});

我确信还有很多比这更好的方法。