无法使用 jQuery 从菜单中显示内容文本

Posted 2023-03-06

【中文标题】无法使用 jQuery 从菜单中显示内容文本

【英文标题】：Can't show content text from menu using jQuery

【发布时间】：2015-07-22 16:13:27

【问题描述】：

我正在尝试使用 jQuery 制作子菜单。这个想法是，当有人单击第一个菜单时会出现一个子菜单，然后当有人单击子菜单时它会消失并显示一个包含信息的 div，但我无法使其正常工作。

这是我的 html：

<ul id="menu">
    <li>
        <a href="#">Item 1</a>
        <ul id="submenu">
            <li><a href="#" data-menu="show1">Sub menu 1</a></li>
            <li><a href="#" data-menu="show2">Sub menu 2</a></li>
        </ul>
    </li>
</ul>
<div id="show1" class="content">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. </div>
<div id="show2" class="content">Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri </div>

这是我的 jQuery：

$(document).ready(function () 
    $('#menu li ').click(function () 
        $('#submenu').fadeToggle();
        $('.content').fadeOut();
    );
    $('ul#submenu li a').click(function () 
        var menu = $(this).data("menu");
        $('#' + menu).fadeIn();
    );
);

这个想法很简单，如果单击菜单，所有内容 div 必须隐藏并且子菜单必须切换（如果隐藏则显示，如果显示则隐藏。）单击子菜单项时，子菜单必须隐藏并且内容 div 匹配必须出现点击的数据属性。

但是，当我单击子菜单项时，它会暂时显示内容然后消失。知道我做错了什么吗？

这里是小提琴：https://jsfiddle.net/yab34zdw/

【问题讨论】：

您的 HTML 中的.content 在哪里？

【参考方案1】：

我不确定我是否得到了您想要的结果，但请尝试一下这个小调整，看看它是否更接近您的描述。我认为这两个点击功能都针对您的子菜单内容。

$(document).ready(function () 
    $('#menu .menu ').click(function () 
        $('#submenu').fadeToggle();
        $('.content').fadeOut();
    );
    $('ul#submenu li a').click(function () 
        var menu = $(this).data("menu");
        $('#' + menu).fadeToggle();
    );
)

<ul id="menu">
    <li>
        <a href="#" class="menu">Item 1</a>
        <ul id="submenu">
            <li><a href="#" data-menu="show1">Sub menu 1</a></li>
            <li><a href="#" data-menu="show2">Sub menu 2</a></li>
        </ul>
    </li>
</ul>
<div id="show1" class="content">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. </div>
<div id="show2" class="content">Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri </div>

【参考方案2】：

当您单击子菜单项时，这两个事件处理程序都会被触发。问题出在您的选择器上：

$('#menu li ') 还捕获子菜单项​​，这些子菜单项也是 <li> 标记，它们是菜单的后代。您可以将选择器更改为 $("#menu > li")，它只捕获直系后代（子代），但我认为通常添加类和使用更简单的选择器会更好。

HTML

<ul id="menu">
    <li class="menu-top-item>
        <a class="menu-top-item-link" href="#">Item 1</a>
        <ul id="submenu">
            <li class="menu-sub-item">
                <a class="menu-sub-item-link" href="#" data-menu="show1">Sub menu 1</a>
            </li>
            <li class="menu-sub-item">
                <a class="menu-sub-item-link" href="#" data-menu="show2">Sub menu 2</a>
            </li>
        </ul>
    </li>
</ul>

javascriptFiddle

$('.menu-top-item-link').click(function () 
    $('#submenu').fadeToggle();
    $('.content').fadeOut();
    return false;
);
$('.menu-sub-item-link').click(function () 
    var menu = $(this).data("menu");
    $('#' + menu).fadeIn();
    return false;
);

【讨论】：

子菜单项是菜单的后代，而不是子菜单。

它不起作用，它完全一样，显示内容片刻然后消失......

@Chico3001 抱歉，我刚刚注意到我有一个选择器仍然指向<li>，而它本应指向<a>。我已经编辑并添加了一个小提琴。

谢谢... return false 丢失了问题，你有任何链接解释原因吗？将不胜感激

return false 不是问题所在。如果你从小提琴中删除它，它的行为仍然相同。问题是我的顶部菜单链接指向<li>，它包含了所有内容。单击子菜单项仍位于顶部 <li> 内，因此两个处理程序仍在触发。 return false 在那里取消<a> 通常应该触发的导航。如果您在链接的单击处理程序中返回 false，它会阻止链接将浏览器导航到其目标。在您的情况下，这仍然是同一页面，但它会阻止向您的 URL 添加哈希。