单击滑动面板打开/关闭

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

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

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

点击将循环显示您的功能