設置在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

實際上，問題在於，當您單擊子li元素時，正在執行容器li偵聽器，因此始終會切換實際狀態。

按照您的方法，最簡單的解決方法是添加一些CSS類，因此您可以識別所單擊的元素是根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"> <ul> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Products</span></a> <ul class='sub-link-list' style='display: none;'> <li><a class='sub-link' href="#">Widgets</a></li> <li><a class='sub-link' href="#">Menus</a></li> <li><a class='sub-link' href="#">Products</a></li> </ul> </li> <li><a href="#"><span>Company</span></a> <ul class='sub-link-list' style='display: none;'> <li><a class='sub-link' href="#">About</a></li> <li><a class='sub-link' href="#">Location</a></li> </ul> </li> <li><a href="#"><span>Contact</span></a></li> </ul> </div> 

http://jsfiddle.net/5ovn7Laj/

希望對您有所幫助！

Answer 2

怎么樣試試看：

 <!-- 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>