jquery - 需要切换才能工作

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);

        });
});