набор открыт в меню jQuery аккордеона

Question

У меня есть рабочее меню аккордеона jquery, которое я следую по этой ссылке. http://perishablepress.com/jquery-accordion-menu-tutorial/#

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

Извините за мой английский, вот код JQuery

var checkElement = $(this).next(); 

$('#cssmenu li').removeClass('active'); 
$(this).closest('li').addClass('active'); 


if((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
    $(this).closest('li').removeClass('active'); 
    checkElement.slideUp('normal'); 
} 

if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
    $('#cssmenu ul ul:visible').slideUp('normal'); 
    checkElement.slideDown('normal'); 
} 

if (checkElement.is('ul')) { 
    return false; 
} else { 
    return true; 
}  

Answer 1

Как насчет попробовать это:

<!-- JS --> 
 
<script type="text/javascript"> 
 
    $(document).ready(function($) { 
 
    $('#accordion').find('.accordion-toggle').click(function(){ 
 

 
     //Expand or collapse this panel 
 
     $(this).next().slideToggle('fast'); 
 

 
     //Hide the other panels 
 
     $(".accordion-content").not($(this).next()).slideUp('fast'); 
 

 
    }); 
 
    }); 
 
</script>

<!-- CSS --> 
 
    .accordion-toggle {cursor: pointer;} 
 
    .accordion-content {display: none;} 
 
    .accordion-content.default {display: block;}

<!-- HTML --> 
 
<div id="accordion"> 
 
    <h4 class="accordion-toggle">Accordion 1</h4> 
 
    <div class="accordion-content default"> 
 
    <p>Cras malesuada ultrices augue molestie risus.</p> 
 
    </div> 
 
    <h4 class="accordion-toggle">Accordion 2</h4> 
 
    <div class="accordion-content"> 
 
    <p>Lorem ipsum dolor sit amet mauris eu turpis.</p> 
 
    </div> 
 
    <h4 class="accordion-toggle">Accordion 3</h4> 
 
    <div class="accordion-content"> 
 
    <p>Vivamus facilisisnibh scelerisque laoreet.</p> 
 
    </div> 
 
</div>

Answer 2

На самом деле проблема в том, что контейнер Ли слушатель выполняется, когда вы нажимаете на элементах ребенок Ли, так всегда делает включенность фактическое состояние.

Следуя вашему подходу, самый простой способ решить это - добавить несколько классов css, чтобы вы могли узнать, является ли элемент clicked корнем li или дочерним li.

Например, вы можете добавить класс к дочерним ссылкам, например «подзаголовок», чтобы распознать их, а затем на слушателе вы просто проверяете, не является ли целевой элемент не подзаголовкой, чтобы добавить и удалить активный класс:

$('#cssmenu li').on('click', function(e){ 
 
    var $target = $(e.target), 
 
     $currentElement = $(this); 
 
     
 
    if (!$target.hasClass('sub-link') && !$currentElement.hasClass('active')){ 
 
     var $activeElement = $('#cssmenu li.active'); 
 
     $activeElement.find('ul').slideUp('normal'); 
 
     $activeElement.removeClass('active'); 
 
     
 
     $currentElement.addClass('active'); 
 
     $currentElement.find('ul').slideDown('normal'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="cssmenu"> 
 
\t <ul> 
 
\t \t <li><a href="#"><span>Home</span></a></li> 
 
\t \t <li><a href="#"><span>Products</span></a> 
 
\t \t \t <ul class='sub-link-list' style='display: none;'> 
 
\t \t \t \t <li><a class='sub-link' href="#">Widgets</a></li> 
 
\t \t \t \t <li><a class='sub-link' href="#">Menus</a></li> 
 
\t \t \t \t <li><a class='sub-link' href="#">Products</a></li> 
 
\t \t \t </ul> 
 
\t \t </li> 
 
\t \t <li><a href="#"><span>Company</span></a> 
 
\t \t \t <ul class='sub-link-list' style='display: none;'> 
 
\t \t \t \t <li><a class='sub-link' href="#">About</a></li> 
 
\t \t \t \t <li><a class='sub-link' href="#">Location</a></li> 
 
\t \t \t </ul> 
 
\t \t </li> 
 
\t \t <li><a href="#"><span>Contact</span></a></li> 
 
\t </ul> 
 
</div>

http://jsfiddle.net/5ovn7Laj/

Я надеюсь, что это помогает!