Складная гармошка не работает внутри Bootstrap dropdpwn-menu

Question

Я хочу смешать выпадающее и свернутое меню вместе, но когда я внедряю аккордеон внутри выпадающего меню, вы не можете нажать на переключатель аккордеона. Раскрывающееся меню скользит вверх.

Вот мой код

<ul class="nav nav-pills">
  <li class="dropdown" id="menu1">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
      Dropdown
      <b class="caret"></b>
    </a>

    <ul class="dropdown-menu">

      <li>
        <a href="#">Action</a>
      </li>

      <li class="divider"></li>

      <li>
        <a href="#">Separated link</a>
      </li>

      <li>
        <div class="accordion" id="accordion2">  

          <div class="accordion-group"> 

            <a class="accordion-toggle" 
               data-toggle="collapse" 
               data-parent="#accordion2" 
               href="#demo1">

               aaa

            </a> 

            <div id="demo1" class="accordion-body collapse" style="height: 0px; ">  
              <ul class="index-list">
                 ......
              </ul>              
            </div>                
          </div>   

          <div class="accordion-group">  

            <a class="accordion-toggle" 
               data-toggle="collapse" 
               data-parent="#accordion2" 
               href="#demo2">

               aaa

            </a>   

            <div id="demo2" class="accordion-body collapse">  
              <ul class="index-list">
               ......
              </ul>             
            </div>               
          </div>  
        </div>
      </li>
    </ul>
  </li>
  ...
</ul>​

Вот ссылка на jsFiddle: http://jsfiddle.net/DBQU7/26/

Answer 1

Я не думаю, что аккордеоны должны были быть включены в выпадающие списки.

Я думаю, вы должны сами запустить аккордеон и избежать дополнительной разметки, которая обычно требуется для аккордеона. Таким образом, вы можете сохранить стиль выпадающего меню.

Вот что я придумал.

Живой пример: http://jsfiddle.net/Sherbrow/YqsTw/

<ul class="nav nav-pills">
    <li class="dropdown" id="menu1">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
    Dropdown
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li>
                <a href="#">Action</a>
            </li>
            <li class="divider"/>
            <li>
                <a href="#">Another action</a>
            </li>
            <li class="divider"/>
            <li>
                <a href="#collapsible1" class="accordion-toggle" data-parent="#menu1">Accordion 1</a>
            </li>
            <li class="collapse in" id="collapsible1">
                <a href="#">Collapsible 1</a>
            </li>
            <li class="divider"/>
            <li>
                <a href="#" data-target=".collapse2" class="accordion-toggle" data-parent="#menu1">Accordion 2</a>
            </li>
            <li class="collapse collapse2">
                <a href="#">Collapsible 2</a>
            </li>
            <li class="collapse collapse2">
                <a href="#">Collapsible 2 bis</a>
            </li>
        </ul>
    </li>
</ul>

$('.dropdown-toggle').dropdown();
$('.dropdown-menu').each(function() {
    $(this).on('click', '.accordion-toggle', function(event) {
        event.stopPropagation();
        var $this = $(this);

        var parent = $this.data('parent');
        var actives = parent && $(parent).find('.collapse.in');

        // From bootstrap itself
        if (actives && actives.length) {
            hasData = actives.data('collapse');
            if (hasData && hasData.transitioning) return;
            actives.collapse('hide');
        }

        var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7

        $(target).collapse('toggle');
    });
});