jQuery手风琴父链接 [英] jQuery Accordion parent link

问题描述

在显示子菜单后，我确实希望单击它链接到父菜单，下面是我的代码怎么做

I do want to be clickable to its link the parent menu after it show the sub menu,how can it this be done below are my codes

我的HTML

        <ul id="menu">
            <li>
                <a href="http://stackoverflow.com/questions/ask">Menu 1 1</a>
                <ul>
                    <li><a href="http://yahoo.com/">Menu 1 Sub</a></li>
                </ul>
            </li>

            <li>
                <a href="http://stackoverflow.com/">Menu 2</a>
                <ul>
                    <li><a href="http://google.com/">Menu 2 Sub 1</a></li>
                    <li><a href="http://wiki.com/">Menu 2 Sub 2</a></li>
                </ul>
            </li>

       </ul>

我的CSS

ul#menu, ul#menu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  width:220px;
}

ul#menu a { font:bold 12px Arial, Helvetica, sans-serif;
  display: block;
  text-decoration: none;    
}

ul#menu li {
  margin-top: 1px;
}

ul#menu li a {
  background: #1c3f94;
  color: #fff;    
  padding: 0.5em;
}

ul#menu li a:hover {
  background: #000;
}

ul#menu li ul li a {
  background: #ccc;
  color: #000;
  padding-left: 20px;
}

ul#menu li ul li a:hover {
  background: #aaa;
  border-left: 5px #000 solid;
  padding-left: 15px;
}

我的JS

function initMenu() {
  $('#menu ul').hide();
  $('#menu ul:first').show();
  $('#menu li a').click(
    function() {
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#menu ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );
  }
$(document).ready(function() {initMenu();});

实时演示

推荐答案

当第一个条件为true时，不返回false:

Don't return false when the first condition is true:

function initMenu() {
    $('#menu ul').hide();
    $('#menu ul:first').show();
    $('#menu li a').click(function () {
        var checkElement = $(this).next();
        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            return true;
        }
        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#menu ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
            return false;
        }
    });
}

这篇关于jQuery手风琴父链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！