如何在页面加载时使用javascript/jquery滑动/打开特定菜单项

How do I slide/open specific menu item using javascript / jquery on page load?

本文关键字：滑动 jquery 菜单项 javascript 加载      更新时间：2023-09-26

我是java和jquery脚本的新手，我已经学会了如何在项目鼠标点击时打开菜单，但如何在页面加载时打开特定菜单？

我使用的是：

<!-- menu -->
<div id="menuone">
    <ul id="menu">
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a>About</a>
            <ul>
                <li><a href="#">one</a></li>
                <li><a href="#">two</a></li>
                <li><a href="#">three</a></li>
            </ul>
        </li>
        <li>
            <a>Projects</a>
            <ul>
                <li><a href="#">project1</a></li>
                <li><a href="#">project2</a></li>
                <li><a href="#">project3</a></li>
            </ul>
        </li>
    </ul>
</div>
<!-- menu end -->

我点击时的javascript是：

function initMenu() {
  $('#menu ul').hide();
  $('#menu li a').click(
    function() {
         $(this).next().slideToggle('normal');               
      }
    );
  } 
 $(document).ready(function() {initMenu();});

但我的问题是：如何在页面加载中打开特定项目？如何打开菜单项2（例如"about"）或菜单项3（"projects"）等。。。？

实际上很容易；

$('#menu li a:eq(1)').trigger('click'); //open "about"
$('#menu li a:eq(2)').trigger('click'); //open "projects"

希望我能帮助

为您的a标签（如）添加一个id

<div id="menuone">
<ul id="menu">
    <li>
        <a href="#" id="home">Home</a>
    </li>
    <li>
        <a id="about">About</a>
        <ul>
            <li><a href="#">one</a></li>
            <li><a href="#">two</a></li>
            <li><a href="#">three</a></li>
        </ul>
    </li>
    <li>
        <a id="projects">Projects</a>
        <ul>
            <li><a href="#">project1</a></li>
            <li><a href="#">project2</a></li>
            <li><a href="#">project3</a></li>
        </ul>
    </li>
</ul>
</div>

然后将您选择的id传递给您的功能，如

// Pay attention to pass id to function
function initMenu(id)
{
    $('#menu ul').hide();
    $('#menu li a').click(
    function() {
        $(this).next().slideToggle('normal');               
    });
    // Add following lines
    if (typeof(id) != 'undefined')
    {
        $('#'+id).click();
    }
} 
$(document).ready(function() {initMenu('projects');});

然后要更改，您可以使用

$(document).ready(function() {initMenu('about');});
相关文章：