设置在 jquery 手风琴菜单中打开

Question

我有一个有效的 jquery 手风琴菜单，我从这个 link 中得到了它。 http://perishablepress.com/jquery-accordion-menu-tutorial/#

但随后我打开一个菜单并单击 link，菜单再次关闭。我希望菜单保持打开状态，并且仅在另一个菜单打开时关闭。

抱歉我的英语不好，这是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 class 元素，这样您就可以识别单击的元素是根 li 还是子 li。

例如，您可以向子 link 添加一个 class，例如 'sub-link' 以识别它们，然后在侦听器上您只需检查目标元素是否不是子元素link 添加和删除活动 class:

$('#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>

设置在 jquery 手风琴菜单中打开

set open in jquery accordion menu

css

jquery

jquery-ui-accordion