1. 首页
  2. 问题列表
  3. 当在JQuery中为手风琴菜单单击子菜单时，突出显示父菜单
提问者：小点点

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


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

关于这个问题。

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

根据当前url，子菜单的当前下拉列表保持打开状态。我现在需要添加的是突出显示下拉子菜单的父菜单。有人能帮我一下吗。

谢谢


共3个答案

匿名用户

-

因为：e.preventDefault（）；阻止页面重定向到锚标记中的url。

-

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

或者，如果要自动执行，请尝试以下操作：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（）函数来突出显示所需的父项

更新

$('.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。

更新

对于没有ul作为子级的lis。

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

});

匿名用户

发生这种情况时，您已阻止锚标记在此处执行其默认行为

$（'.smenu）

因此，使锚标记重定向到相应的href的唯一方法是根据href值手动重定向页面。

窗口。地方href=$（这个）。attr（'href'）

JS FIDDLE现场演示：

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

快乐编码：）

匿名用户

不知道如果我问对了你的问题。。。因此：首先，您想单击一个主项以显示子菜单，如果您单击该子项，您想突出显示主项吗？

如果是这样，这是我的小提琴：

我对html标记做了一点修改——主要项的类名总是相同的。如果您需要以某种方式处理单个主项，请使用id。我还为主项li和子项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>

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

$(".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，并重置“打开”处理程序

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

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

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

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

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

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

$(".subItem").click(function (e) {
    e.stopPropagation();
    $(".mainItem").removeClass("selectedGroup");
    $(this).parents(".mainItem").addClass("selectedGroup");    
});

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS