jquery - 滑动面板在点击时打开/关闭

Question

我怎样才能拥有这个滑动面板功能，但“点击”而不是鼠标悬停/鼠标悬停

    <script>
    $("button.main").mouseover(function() {
        $("div.sliderInner").animate(
                {"width": "100px"},
                "500");
    });

    $("button.main").mouseout(function() {
        $("div.sliderInner").animate(
                {"width": "0px"},
                "700");
    });

    $("button.main").mouseover(function() {
       $("div.sliderInner")
      .html('Example Content');
    });

    $("button.main").mouseout(function() {
       $("div.sliderInner")
      .html('');
    });
    </script>

谢谢

Answer 1

而不是 mouseover 做 .toggle 然后提供你希望它切换的任意数量的功能，包括 slideInner

 $(#buttonmain).toggle(function () {
     $('div.sliderInner').animate(
            {"width": "100px"},
             "500");
       }, function () {
          //animate next click
       });

点击将在您的功能中循环