0

したがって、JQuery UI Accordion のデフォルトの動作は、垂直方向の開閉です。私が求めているのは、同じ機能を持つことができることですが、垂直ではなく水平のみです。デフォルトで開いているWebアプリの右側のパネルのようですが、divの左側のスペースをクリックして閉じたり開いたりできます。ここの例c2にあるもののようなもの：

http://wiki.jqueryui.com/w/page/12137702/Accordion?SearchFor=accordion+horizo​​ntal&sp=1

4

1 に答える 1

0

http://www.designchemical.com/blog/index.php/jquery/jquery-simple-horizo​​ntal-accordion/

上記のリンクを確認すると、単純な水平アコーディオンが表示されます。

div/panel.i は 1 つしかないため、1 つの div/panel で機能するように jquery を変更しました

        <ul id="accordion">
        <li>
        <img src="http://www.designchemical.com/lab/jquery/demo/images/section_1.png" />
             <strong>Section 1 Header</strong><br/>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat  quam, non suscipit arcu accumsan at. Aliquam pellentesque.
       </li> 
          </ul>

CSS:

          #accordion {
              list-style: none;
              margin: 30px 0;
              padding: 0;
              height: 200px;
              overflow: hidden;
              background: #7d8d96;}

         #accordion li {
              float: left;                  
              display: block;
              height: 170px;
              width: 50px;
              padding: 15px 0;
              overflow: hidden;
              color: #fff;
              text-decoration: none;
              font-size: 16px;
              line-height: 1.5em;
              border-left: 1px solid #fff;}

           #accordion li img {
              border: none;
              border-right: 1px solid #fff;
              float: left;
              margin: -15px 15px 0 0;
                   }

           #accordion li.active {
               width: 450px;
             }

Jクエリ:

           $(document).ready(function(){     
                 var flag=true;
                 $("#accordion li").click(function(){        
                   if(flag==false)
                    {
                      $(this).animate({width: "50px"}, {duration:300, queue:false});
                       flag=true;
                    }
                     else{
                      $(this).animate({width: "450px"}, {duration:300, queue:false});
                        flag=false;
                          }      
                        }); 
            });

このフィドルをチェックしてください：http://jsfiddle.net/Kritika/5YECg/2/

于 2013-06-27T17:52:25.883 に答える