2012-06-26 2 views
0

Я построил этот аккордеон, используя плагин jquery ui accordion, я как бы понимаю, как это работает, но я запутываюсь, чтобы найти правильный путь для аккордеона, чтобы закрыть его. Я также хотел бы, чтобы мои собственные значки стрелок переключались на стрелку вниз, когда открыта секция аккордеона. Вот сценарий: jquery accordion pluginборется с JQuery ui плагин аккордеона

Любая помощь была оценена, даже если она указана в правильном направлении. Самое главное, чтобы свернуть на отведении указателя мыши

+0

Я понимаю, там нас много вопросов на этом, но я не могу найти ответы Я ищу –

+1

На стороне примечание 'id' предназначен для уникального идентификатора в элементе DOM, поэтому, если у вас есть общий' id' среди элементов, вам лучше использовать 'class' as селектор. :) – Richard

ответ

1

Здесь вы идете: fiddle

$(function() { 
    $("#accordion").accordion({ 
     event: 'click', 
     collapsible: true, 
     active: false, 
     icons: { 
      "header": "yourIconClassClosed", 
      "headerSelected": "yourIconClassOpen" 
     } 
    }).on('mouseleave', function() { 
     $(this).accordion("option", "active", false); 
    }).children('li').on('mouseenter', function() { 
     $(this).find('h3').trigger('click'); 
    }); 
}); 

EDIT: Вы должны рассмотреть мою восстановленную HTML:

<div id="helpmenu"> 
<ul id="accordion"> 
    <li> 
     <h3><a href="#">About us</a></h3> 
     <div class="accordhidden"> 
      <ul> 
       <li>List item one</li> 
       <li>List item two</li> 
       <li>List item three</li> 
      </ul> 
     </div> 
    </li> 
    <li> 
     <h3><a href="#">Section 1</a></h3> 
     <div class="accordhidden"> 
      <ul> 
       <li>List item one</li> 
       <li>List item two</li> 
       <li>List item three</li> 
      </ul> 
     </div> 
    </li> 
    <li> 
     <h3><a href="#">Section 2</a></h3> 
     <div class="accordhidden"> 
      <ul> 
       <li>List item one</li> 
       <li>List item two</li> 
       <li>List item three</li> 
      </ul> 
     </div> 
    </li> 
    <li> 
     <h3><a href="#">Section 3</a></h3> 
     <div class="accordhidden"> 
      <ul> 
       <li>List item one</li> 
       <li>List item two</li> 
       <li>List item three</li> 
      </ul> 
     </div> 
    </li> 
    <li> 
     <h3><a href="#">Section 4</a></h3> 
     <div class="accordhidden"> 
      <ul> 
       <li>List item one</li> 
       <li>List item two</li> 
       <li>List item three</li> 
      </ul> 
     </div> 
    </li> 
</ul> 
</div> 
+0

Есть ли такая версия? –

+0

Это зависает, не так ли? Я просто привязываю аккордеон к щелчку, а затем запускаю его, чтобы вы могли использовать как функцию наведения курсора мыши, так и щелчок ... – Simon

+0

Я скопировал весь код на свой сайт, и он работает только onclick –

0

Это может ответить на часть вашего вопроса

http://jsfiddle.net/Z6LWH/1/

+0

спасибо Донлад, который работает, но когда вы выходите из подменю, его нет, как я могу заставить его рухнуть, когда мышь из всего аккордеона –

+0

Попробуйте этот http://jsfiddle.net/Z6LWH/ 11/ – ngplayground

+0

Он работает на скрипке, но нет на сайте –

0

Другая часть к решению: set icon classes

$("#accordion").accordion({ 
    event: "mouseover", 
    collapsible: true, 
    active: false, 
    alwaysOpen: false, 
    icons: { 
     "header": "yourIconClassClosed", 
     "headerSelected": "yourIconClassOpen" 
    } 
}); 

А затем установить стили на этих классах ,

Смежные вопросы