繁体   English   中英

jQuery手风琴父链接

[英]jQuery Accordion parent link

在显示子菜单后,我确实希望单击其链接到父菜单,如何在下面完成此操作呢?

我的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:

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;
        }
    });
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM