Question

我对jQuery很新，所以我承认我并不完全知道我在做什么。顶部菜单项只是文本，而不是它自己的链接，但它有一个下拉列表。我试图在切换文本之前添加加号和减号，同时保持原始内容可点击。

HTML

<div class="menu-clinical-materials">
<ul>
    <li class="menu-item-has-children"><a>Clinical Studies &amp; Articles</a>           
        <ul class="sub-menu" style="display: none;">
            <li><a target="_blank" href="">Link 1</a></li>
            <li><a target="_blank" href="">Link 2</a></li>
            <li><a target="_blank" href="">Link 3</a></li>
            <li><a target="_blank" href="">Link 4</a></li>
            <li><a target="_blank" href="">Link 5</a></li>
        </ul>
    </li>
    <li class="menu-item-has-children"><a>Counseling Sheets</a>         
        <ul class="sub-menu" style="display: none;">
            <li><a target="_blank" href="">Link 1</a></li>
            <li><a target="_blank" href="">Link 2</a></li>
            <li><a target="_blank" href="">Link 3</a></li>
            <li><a target="_blank" href="">Link 4</a></li>
            <li><a target="_blank" href="">Link 5</a></li>
        </ul>
    </li>
</ul>

JS

jQuery.noConflict();
jQuery(document).ready(function () {
    jQuery(".menu-item-has-children:has(ul)").prepend("<span class=\"Expander\">+</span>");
    jQuery(".Expander").click(function () {
        jQuery(this).html(jQuery(this).html() == "+" ? "-" : "+");
        jQuery(this).toggleClass("Expanded").siblings("ul").slideToggle();
        return false;
    }).eq(0).addClass("Expanded").end().slice(1).siblings("ul").hide();
});

所以我希望“临床研究和文章”可点击，而不仅仅是+/-符号。

Here's what I have so far

修改

我能够以我想要的方式工作但使用不同的方法。我仍然想知道如何使用.click函数执行此操作而不是切换。我很感激。这是我的解决方法的小提琴 Fiddle

这是更改后的JS

//<![CDATA[
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery(".menu-item-has-children:has(ul)").prepend("<span class=\"plus-minus\">+</span>");
jQuery(".sub-menu").addClass('expander').hide();
jQuery('.menu-item-has-children').parent().toggle(function () {
    jQuery(".plus-minus").text("-");
    jQuery(".expander").slideDown();
}, function () {
    jQuery(".plus-minus").text("+");
    jQuery(".expander").slideUp();
})
});

Answer 1

改进了demo。使用event.stopPropagation()可防止点击内部链接以冒泡并关闭整个块。

//<![CDATA[
jQuery.noConflict();
jQuery(document).ready(function () {
    jQuery(".menu-item-has-children:has(ul)").prepend("<span class=\"Expander\">+</span>");

    jQuery(".menu-item-has-children").click(function () {
        buttonText = jQuery(this).children('.Expander').html() == "+" ? "-" : "+";
        jQuery(this).children('.Expander').html(buttonText);
        jQuery(this).children('.Expander')
            .toggleClass("Expanded").siblings("ul").slideToggle();
        return false;
    }).eq(0).slice(1).siblings("ul").hide();
});

//Prevent close on click of inner links.
jQuery(".sub-menu > li").click(function (e) {
    e.stopPropagation();
});

//]]>

在保持链接时折叠时将加号更改为减号

1 个答案: