需要切换工作

Question

我希望可折叠面板在切换到切换点外的任何位置时切换为关闭并显示+。这是我的代码

$(document).ready(function () {
  $('#toggle li').click(function () {
    var siler = $(this).children('.collapse');
    if (siler.is(':hidden')) {
      siler.slideDown('200');
      $(this).children('span').html('--');  
    } else {
      siler.slideUp('200');
      $(this).children('span').html('+');
    }
  });
});

$('#toggle li > .collapse:eq(0)').hide();

$(document).click(function(event) {
  if ( !$(event.target).hasClass('#toggle li > .collapse')) {
    $("#toggle li > .collapse").hide();
    $(this).children('span').html('+'); 
  }
});

让你玩

的小提琴

http://jsfiddle.net/krishkam2610/Ss3xU/13/

Answer 1

你的代码太复杂了。你为什么不尝试这样的事情：

$(document).ready(function () {
    $('#toggle li').click(function () {
        a = $(this).children(".plusminus");
        $(this).children(".panel").slideToggle('fast', function(){
            a.html($(this).is(":visible") ? '--' : '+');
        });
    });
    $("body").click(function(event){
        if ($(event.target).closest("ul").attr('id') != "toggle") {
            $("#toggle li > .panel").slideUp();
            $('.plusminus').html('+');
        }
    });
});

演示：jsFiddle

---

根据评论更新。

$(document).ready(function () {
    $('#toggle li').click(function () {
        $("#toggle li > .panel").slideUp();
        $('.plusminus').html('+');
        a = $(this).children(".plusminus");
        $(this).children(".panel").slideToggle('fast', function(){
            a.html($(this).is(":visible") ? '--' : '+');
        });
    });
    $("body").click(function(event){
        if ($(event.target).closest("ul").attr('id') != "toggle") {
            $("#toggle li > .panel").slideUp();
            $('.plusminus').html('+');
        }
    });
});

演示：jsFiddle

---

根据评论更新。

$(document).ready(function () {
    $("#toggle li > .panel").hide();
    $('.plusminus').html('+');
    $('#toggle li').click(function () {
        $("#toggle li > .panel").slideUp();
        $('.plusminus').html('+');
        a = $(this).children(".plusminus");
        $(this).children(".panel").slideToggle('fast', function(){
            a.html($(this).is(":visible") ? '--' : '+');
        });
    });
    $("body").click(function(event){
        if ($(event.target).closest("ul").attr('id') != "toggle") {
            $("#toggle li > .panel").slideUp();
            $('.plusminus').html('+');
        }
    });
});

演示：jsFiddle

---

$(document).ready(function () {
    $("#toggle li > .panel").hide();
    $('.plusminus').html('+');
    $('#toggle li').click(function () {
        if( !$(this).children('.panel').is(":visible") ) {
            $("#toggle li > .panel").slideUp();
            $('.plusminus').html('+');
        }
        a = $(this).children(".plusminus");
        $(this).children(".panel").slideToggle('fast', function(){
            a.html($(this).is(":visible") ? '--' : '+');
        });
    });
    $("body").click(function(event){
        if ($(event.target).closest("ul").attr('id') != "toggle") {
            $("#toggle li > .panel").slideUp();
            $('.plusminus').html('+');
        }
    });
});

演示：jsFiddle

Answer 2

看看这个。我想这就是你想要的。 Fiddle

$(document).ready(function () {

        $('#toggle li').bind('click', function(){

                $(this).children('.panel').toggle();
                var a = $(this).children('span').html()=="-"?"+":"-";
                $(this).children('span').html(a);

        });
});