Javascript 多个下拉导航-如何更改触发器按钮

我正在努力解决我的一个问题

目前，它被设置为由i标签触发，以下拉子菜单

$('nav li i').click(function() {

我想将其更改为（导航LIA），这样就不必按下图标

我还有代码：

var child = $(this).index('nav ul li i');

但我不知道该改成什么

您可以在JSFIDLE中看到所有代码

---

因为我没有看到

基本上我变了

$('nav li i').click(function() {

到

而且

var child = $(this).index('nav ul li i');

到

这就是您需要的吗？
因为我没有看到

基本上我变了

$('nav li i').click(function() {

到

而且

var child = $(this).index('nav ul li i');

到

这就是您需要的吗？
您可以通过在单击的元素中搜索“.dropdown”来保存对该下拉列表的引用，而不是使用图标的索引来标识要向下滑动的下拉列表

$('nav li').click(function () {
    var $childDropdown = $(this).find('.dropdown');

    if ($childDropdown.is(':visible')) {
        $('.dropdown').slideUp(300);
    } else {
        $('.dropdown').slideUp(300);
        $childDropdown.slideDown(300);
    }
});

您可以通过在单击的元素中搜索“.dropdown”来保存对该下拉列表的引用，而不是使用图标索引来标识要向下滑动的下拉列表

$('nav li').click(function () {
    var $childDropdown = $(this).find('.dropdown');

    if ($childDropdown.is(':visible')) {
        $('.dropdown').slideUp(300);
    } else {
        $('.dropdown').slideUp(300);
        $childDropdown.slideDown(300);
    }
});

这只是解决此问题的另一种方法。如果你需要任何解释，请评论，我会编辑答案。我已经在下面对JavaScript进行了评论。我还删除了标记中额外的
，因为嵌套的
是一个非常好的容器


HTML

<nav id="moo">
    <ul>
        <li><a href="#">Item A</a>
            <ul>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
            </ul>
        </li>
        <li><a href="#">Item B</a>
            <ul>
                <li>Item 7</li>
                <li>Item 8</li>
                <li>Item 9</li>
            </ul>
        </li>
    </ul>
</nav>

JavaScript

var $allSubMenus = $('ul ul');                // handle to all submenus

$('nav li a').click(function (e) {
    var $li = $(this).closest('li');          // get parent <li> of the <a> clicked on
    var $subMenu = $li.find('ul');            // get our submenu
    $allSubMenus.not($subMenu).slideUp(300);  // hide all other submenus
    $subMenu.slideToggle(300);                // show our submenu
    e.stopPropagation();                      // stop event bubbling further
});

$(document).click(function () {
    $allSubMenus.hide();                      // no need to reselect, just use handle
});

var$allSubMenus=$（'ul'）；//所有子菜单的句柄
$（'nav li a'）。单击（函数（e）{
var$li=$（this）.closest（'li'）；//获取所单击对象的父级

var$subMenu=$li.find（'ul'）；//获取我们的子菜单
$allSubMenus.not（$subMenu.slideUp（300）；//隐藏所有其他子菜单
$subMenu.slideToggle（300）；//显示我们的子菜单
e、 stopPropagation（）；//停止事件进一步冒泡
});
$（文档）。单击（函数（）{
$allSubMenus.hide（）；//无需重新选择，只需使用句柄
});
这只是解决此问题的另一种方法。如果你需要任何解释，请评论，我会编辑答案。我已经在下面对JavaScript进行了评论。我还删除了标记中额外的
，因为嵌套的
是一个非常好的容器


HTML

<nav id="moo">
    <ul>
        <li><a href="#">Item A</a>
            <ul>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
            </ul>
        </li>
        <li><a href="#">Item B</a>
            <ul>
                <li>Item 7</li>
                <li>Item 8</li>
                <li>Item 9</li>
            </ul>
        </li>
    </ul>
</nav>

JavaScript

var $allSubMenus = $('ul ul');                // handle to all submenus

$('nav li a').click(function (e) {
    var $li = $(this).closest('li');          // get parent <li> of the <a> clicked on
    var $subMenu = $li.find('ul');            // get our submenu
    $allSubMenus.not($subMenu).slideUp(300);  // hide all other submenus
    $subMenu.slideToggle(300);                // show our submenu
    e.stopPropagation();                      // stop event bubbling further
});

$(document).click(function () {
    $allSubMenus.hide();                      // no need to reselect, just use handle
});

var$allSubMenus=$（'ul'）；//所有子菜单的句柄
$（'nav li a'）。单击（函数（e）{
var$li=$（this）.closest（'li'）；//获取所单击对象的父级

var$subMenu=$li.find（'ul'）；//获取我们的子菜单
$allSubMenus.not（$subMenu.slideUp（300）；//隐藏所有其他子菜单
$subMenu.slideToggle（300）；//显示我们的子菜单
e、 stopPropagation（）；//停止事件进一步冒泡
});
$（文档）。单击（函数（）{
$allSubMenus.hide（）；//无需重新选择，只需使用句柄
});
是的，这很有效！我以为我已经试过了，但没用。很明显，我也没有做对。什么是.索引（“nav ul li a”）；对于我还用.index（）尝试了它；在您回答之前，它工作了，但这是正确的做法吗？
child
用于确定要显示的菜单。如果单击第一个
元素，将打开第一个菜单、第二个
第二个菜单等。如果我想在子菜单中使用标记，我会将索引更改为什么？是的，可以！我以为我已经试过了，但没用。很明显，我也没有做对。什么是.索引（“nav ul li a”）；对于我还用.index（）尝试了它；在您回答之前，它工作了，但这是正确的做法吗？
child
用于确定要显示的菜单。如果单击第一个
元素，将打开第一个菜单，第二个
第二个菜单，等等。如果我想在子菜单中使用标记，我会将索引更改为什么？看起来很简单。唯一的问题是我想让下拉菜单直接放在每个按钮下面。对不起，我认为它起作用了。我看错了！我想找到会更容易！！在某些情况下，查找也可以更快。这看起来很容易。唯一的问题是我想让下拉菜单直接放在每个按钮下面。对不起，我认为它起作用了。我看错了！我想找到会更容易！！在某些情况下，查找也可以更快。