在Jquery中为手风琴菜单单击子菜单时突出显示父菜单

时间：2014-08-26 06:07:23

标签： jquery menu accordion 

$(document).ready(function() {

  // initialize accordion
  $('.acd ul').each(function() {
    var currentURI = window.location.href;
    var links = $('a', this);
    var collapse = true;
    for (var i = 0; i < links.size(); i++) {
      var elem = links.eq(i);
      var href = elem.attr('href');
      var hrefLength = href.length;
      var compareTo = currentURI.substr(-1 * hrefLength);
      if (href == compareTo) {
        collapse = false;
        break;
      }
    };
    if (collapse) {
      $(this).hide();
    }
  });

  // on click, show this element and hide all others
  $('.acd > li').click(function() {
    var me = $(this).children('ul');
    $('.acd ul').not(me).slideUp('normal');
    me.slideDown('normal');
  });
});
.acd,
.acd ul,
.acd li,
.acd a,
.acd span {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
}

.acd li {
  list-style: none;
}

.acd li>a {
  display: block;
  position: relative;
  min-width: 110px;
  padding: 0 10px 0 40px;
  color: #fdfdfd;
  font: bold 12px/32px Arial, sans-serif;
  text-decoration: none;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, .35);
  background: #616975;
  background: -moz-linear-gradient(top, rgb(114, 122, 134) 0%, rgb(80, 88, 100) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(114, 122, 134)), color-stop(100%, rgb(80, 88, 100)));
  background: -webkit-linear-gradient(top, rgb(114, 122, 134) 0%, rgb(80, 88, 100) 100%);
  background: -o-linear-gradient(top, rgb(114, 122, 134) 0%, rgb(80, 88, 100) 100%);
  background: -ms-linear-gradient(top, rgb(114, 122, 134) 0%, rgb(80, 88, 100) 100%);
  background: linear-gradient(top, rgb(114, 122, 134) 0%, rgb(80, 88, 100) 100%);
  -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, .1), 0px 1px 0px 0px rgba(0, 0, 0, .1);
  -moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, .1), 0px 1px 0px 0px rgba(0, 0, 0, .1);
  box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, .1), 0px 1px 0px 0px rgba(0, 0, 0, .1);
}

.acd li>a span {
  display: block;
  position: absolute;
  top: 7px;
  right: 0;
  padding: 0 10px;
  margin-right: 10px;
  font: normal bold 12px/18px Arial, sans-serif;
  background: #404247;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .2), 1px 1px 1px rgba(255, 255, 255, .1);
  -moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .2), 1px 1px 1px rgba(255, 255, 255, .1);
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .2), 1px 1px 1px rgba(255, 255, 255, .1);
}

.smenu li a {
  color: #878d95;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, .2);
  background: #f2f2f2;
  border-bottom: 1px solid #d6d6d6;
  -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, .1), 0px 1px 0px 0px rgba(0, 0, 0, .1);
  -moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, .1), 0px 1px 0px 0px rgba(0, 0, 0, .1);
  box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, .1), 0px 1px 0px 0px rgba(0, 0, 0, .1);
}

.smenu li:last-child a {
  border: none;
}

.smenu li>a span {
  color: #797979;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, .2);
  background: transparent;
  border: 1px solid #c9c9c9;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.smenu em {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 14px;
  color: #a6a6a6;
  font: normal 10px/32px Arial, sans-serif;
}

.acd>li:target>a,
.acd>li>a.active {
  color: #00121c;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, .2);
  /*background: url(../img/active.png) repeat-x;*/
  background: #0088cd;
  background: -moz-linear-gradient(top, #0088cd 0%, #00669a 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0088cd), color-stop(100%, #00669a));
  background: -webkit-linear-gradient(top, #0088cd 0%, #00669a 100%);
  background: -o-linear-gradient(top, #0088cd 0%, #00669a 100%);
  background: -ms-linear-gradient(top, #0088cd 0%, #00669a 100%);
  background: linear-gradient(top, #0088cd 0%, #00669a 100%);
}

.smenu li:hover a {
  background: #f7f7f7;
}

.acd li>.smenu {
  display: block;
}

.acd li:target>.smenu {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="acd">
  <li class="item1">
    <a href="#">Parent 1</a>
    <ul class="smenu">
      <li><a href="subpage1">Child 1</a></li>
      <li><a href="subpage2">Child 2</a></li>
    </ul>
  </li>
  <li class="item2">
    <a href="#">Parent 2</a>
    <ul class="smenu">
      <li><a href="subpage3">Child 1</a></li>
      <li><a href="subpage4">Child 2</a></li>
    </ul>
  </li>
</ul>

参考this question。

我希望手风琴菜单下拉并在点击子菜单时突出显示父级，下拉菜单应该保持打开状态，以突出显示父级li的点击链接。

目前，根据当前网址，子菜单下拉列表仍然打开。我现在需要添加的是突出显示下拉子菜单的父级。有人可以帮助我。

谢谢！

3 个答案:

答案 0 :(得分：0)

发生这种情况，你已经阻止了锚标记在这里做了默认的行为

$('.smenu > li > a').on('click',function(e){ e.preventDefault();

因此，只有将锚标记重定向到相应的href，才能通过基于href值手动重定向页面。

window.location.href=$(this).attr('href');

现场演示的JS FIDDLE：

http://jsfiddle.net/dreamweiver/Lnuvu5ru/1/

快乐编码：）

答案 1 :(得分：0)

  

- ＆GT;目前它能够这样做，除了孩子的链接似乎   被禁用

因为：e.preventDefault（）; 这阻止了页面重定向到锚标记中的URL。

  

- ＆GT;我的子页面在左侧布局上有这个菜单。

当您使用每个页面上的菜单导航到不同的页面时，您必须自己在每个页面上设置active类，以便在加载页面时，菜单已处于活动状态以指示你是哪个页面。

或者如果您想自动执行此操作，请尝试以下操作：http://jsfiddle.net/rd35goyt/1/（无法在那里进行测试）

$('.smenu > li > a').on('click', function (e) {
    e.preventDefault();
    highlight($(this));
    window.location.href = $(this).prop('href') + "#" + $(this).prop("id");
});
function highlight($elem) {
    // reset previously sliding ul
    $('.acd > li > a.active').next('ul').slideUp();
    $('.acd > li > a').removeClass('active');

    $elem.closest('ul').prev('a').addClass('active');
    $elem.closest('ul').slideDown();
}
var type = window.location.hash.substr(1);
highlight($("#"+type));

<强> HTML 

<ul class="acd">
    <li class="item1"> <a href="#">Parent 1</a>

        <ul class="smenu">
            <li><a href="subpage1" id="c1">Child 1</a>
            </li>
            <li><a href="subpage2" id="c2">Child 2</a>
            </li>
        </ul>
    </li>
    <li class="item2"> <a href="#">Parent 2</a>

        <ul class="smenu">
            <li><a href="subpage3" id="c3">Child 1</a>
            </li>
            <li><a href="subpage4" id="c4">Child 2</a>
            </li>
        </ul>
    </li>
</ul>

注意：id用于子链接。

基本上：

  1. 发送子链接的id，点击下一个子页面。
  2. 在子页面上，它会提取ID并调用highlight()函数以突出显示所需的父级。

    3. <强>更新 

    $('.smenu > li > a').on('click', function (e) {
    e.preventDefault();
    highlight($(this));
    window.location.href = $(this).prop('href') + "#" + $(this).parent().prop("id");
});
function highlight($elem) {
    // reset previously sliding ul
    $('.acd > li > a.active').next('ul').slideUp();
    $('.acd > li > a').removeClass('active');

    $elem.closest('ul').prev('a').addClass('active');
    $elem.closest('ul').slideDown();
}
var type = window.location.hash.substr(1);
highlight($("#" + type + " a"));

    <强> HTML 

    <ul class="acd">
    <li class="item1"> <a href="#">Parent 1</a>

        <ul class="smenu">
            <li id="c1"><a href="subpage1">Child 1</a>
            </li>
            <li id="c2"><a href="subpage2">Child 2</a>
            </li>
        </ul>
    </li>
    <li class="item2"> <a href="#">Parent 2</a>

        <ul class="smenu">
            <li id="c3"><a href="subpage3">Child 1</a>
            </li>
            <li id="c4"><a href="subpage4">Child 2</a>
            </li>
        </ul>
    </li>
</ul>

    注意：id代表li。

    <强>更新

    对于没有li作为孩子的ul。

    http://jsfiddle.net/rd35goyt/2/ 

    $('.acd > li').click(function () {
    var me = $(this).children('ul');
    if(me.length===0){
        $(this).children().addClass("active");
        return;
    }
    $('.acd ul').not(me).slideUp('normal');
    me.slideDown('normal');

});

答案 2 :(得分：0)

如果我以正确的方式得到你的问题，那就不知道了......所以：首先，你想点击一个主要项目来显示子菜单，如果你点击子项目，你想要突出显示主要项目？ / p>

如果是，这是我的fiddle：

我稍微更改了你的html标记 - 主要项目的类名始终相同。如果你需要以某种方式解决一个主要项目，请使用id。我还为mainItem li和subItem li添加了类，所以你可以直接在你的css中解决它们：

<ul class="menu">
    <li class="mainItem" id="itemOne"> <a href="#">Parent 1</a>

        <ul class="subMenu">
            <li class="subItem"><a href="#">Child 1</a>

            </li>
            <li class="subItem"><a href="#">Child 2</a>

            </li>
        </ul>
    </li>
</ul>

脚本相当简单 - 我为所选主菜单项和打开的类创建了两个“处理程序”类： 首先，隐藏所有subMenus 

$(".subMenu").hide();

创建点击功能

$(".mainItem").click(function () {

首先，检查点击的mainItem是否尚未打开：

    if (!$(this).hasClass("openedGroup")) {
    //don't forget the ! at the beginning of the if statement. we want to check on the 
    //false condition

如果点击的mainItem是'未打开'，我们首先在打开的mainItem中滑动，然后重置我们的“open”处理程序

        $(".openedGroup > .subMenu").stop(true, true).slideUp(400);
        $(".mainItem").removeClass("openedGroup");

然后我们为我们点击的类设置“open”处理程序，并将其滑入

        $(this).addClass("openedGroup");
        $('.subMenu', this).stop(true, true).slideDown(400);
    }
});

你说，有些主要项目没有子菜单。因此我将类'noSubMenu'添加到mainItem li并将其插入此处：

if ($(this).hasClass("noSubMenu")) {
    $(".mainItem").removeClass("selectedGroup");
    $(this).addClass("selectedGroup");
}

subItem Click功能很短。首先，我们从所有主项中删除选定的处理程序，然后将其设置为单击的子项的父主项。 由于subitem li的直接父级是子菜单ul，我们使用parents（）和mainitem的类选择器。 selectedGroup类通过css获得不同的背景... 

$(".subItem").click(function (e) {
    e.stopPropagation();
    $(".mainItem").removeClass("selectedGroup");
    $(this).parents(".mainItem").addClass("selectedGroup");    
});
相关问题
最新问题