Горизонтальная прокрутка Jquery Accordion?

Таким образом, поведение JQuery UI Accordion по умолчанию — вертикальное открытие и закрытие. Что мне нужно, так это возможность иметь ту же функциональность, но только горизонтальную, а не вертикальную. Как панель в правой части веб-приложения, которая по умолчанию открыта, но затем можно щелкнуть пробел слева от div, чтобы закрыть и открыть. Вроде как в примере c2 здесь:

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


javascript html jquery accordion
person Mark    schedule 27.06.2013    source источник
comment
Вы можете вручную написать что-то подобное, используя jQuery. Дайте мне знать, если вы хотите изучить это или просто использовать плагин   -  person Zach Saucier    schedule 27.06.2013
comment
Хотя похоже, что кто-то опубликовал что-то, что работает, мне было бы интересно посмотреть, что вы предлагаете, пожалуйста.   -  person Mark    schedule 27.06.2013
comment
Например, этот проект включает переключение ширины (и высоты, но вы можете убрать это) . С небольшой доработкой это может быть простая и удобная горизонтальная вкладка, но плагин упрощает реализацию.   -  person Zach Saucier    schedule 27.06.2013

Ответы (1)


arrow_upward
0
arrow_downward

http://www.designchemical.com/blog/index.php/jquery/jquery-simple-horizontal-accordion/

проверьте приведенную выше ссылку, она показывает простой горизонтальный аккордеон.

так как у вас есть только один div/panel.i изменил jquery для работы с одним div/panel

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

Jquery:

           $(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/

person Pbk1303    schedule 27.06.2013
comment
Проблема с приведенными примерами заключается в том, что они, кажется, требуют нескольких панелей/дивов. В основном я только пытаюсь открыть и закрыть один div. Дополнительные идеи, пожалуйста? Спасибо большое. - person Mark; 28.06.2013
comment
@Mark: я отредактировал код для одного div/panel. это то, что ты хотел? - person Pbk1303; 02.07.2013
comment
Я пытаюсь поместить туда то, что у меня есть на скрипке ниже. Можете ли вы помочь с этим, пожалуйста? скрипка: jsfiddle.net/devtech8/XjVym - person Mark; 02.07.2013
comment
@Mark: вы сказали, что у вас есть только один div / панель, но похоже, что у вас более одного div, а скрипка, которую вы дали, имеет обычный аккордеон. Вы хотите, чтобы заголовок вашей панели имел тот же интерфейс, что и обычный аккордеон jquery? - person Pbk1303; 03.07.2013
comment
если вам нужен тот же пользовательский интерфейс, что и у обычного аккордеона jquery, вы можете изменить свой css и изображение, а для стрелок вы можете добавить класс css, когда он выбран и не выбран в jquery. было бы хорошо, если бы вы могли дать мне скрипку с горизонтальным аккордеоном, над чем вы работали до сих пор, для лучшего понимания. - person Pbk1303; 03.07.2013