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。

例如，您可以将子类添加到子链接（如“子链接”）以识别它们，然后在侦听器上检查目标元素是否不是要添加和删除活动类的子链接： / p>

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

试试这个怎么样：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

在jquery手风琴菜单中打开

2 个答案: