Question

这是我的HTML：

    <div class="accord">

    <ul class="root static">

        <li class="static">

          <a class="static menu-item" href="http://google.com">
            <span class="additional-background">
              <span class="menu-item-text">Heading</span>
            </span>
          </a>

          <ul class="static">
            <li class="static">
               <a class="static menu-item" href="http://msn.com">
                 <span class="additional-background">
                   <span class="menu-item-text">Item 1</span>
                 </span>
               </a>
            </li>
         </ul>

      </li>

.. items continue ..

jQuery：

$(function() {
$('.accord .root .static ul.static').hide();
    $('.ms-quickLaunch .root .static:has(ul.static)').each(function (i, elmnt) {
        $(this).addClass('linksBelow');
    });
    $('.accord .linksBelow').click(function() {
        $(this).find('ul.static').slideToggle('fast');
        $(this).toggleClass('twirl');
    });
});

上述情况是，当您点击<li>标题时，手风琴会展开，但标题包含链接<a class="static menu-item" href="http://google.com">。

我想更改上面的jQuery，以便当我点击标题中的链接时，手风琴不会展开，但是当我点击链接周围的任何其他区域时，我希望手风琴展开。

我需要知道如何点击链接，如果点击该链接，则会阻止手风琴扩展。

有人有什么想法吗？

链接未设置为display:block，因此它不会占用标题的整个宽度。

Answer 1

$('.accord .linksBelow').click(function(e) {
    $(this).find('ul.static').slideToggle('fast');
    $(this).toggleClass('twirl');
    e.stopPropagation();
});

jQuery Accordion - 防止点击链接扩展

1 个答案: