Question

我的html页面中有以下结构，我用php填充了一些下拉列表。以下是最终结构

<ul id='nav'>
             <li><a href='#' id='s7' >Heading 1</a>
<ul>
<a href='coursedetail.php'><li class='lidiv'>one</li></a>
<a href='coursedetail.php'><li class='lidiv'>two</li></a>
<a href='coursedetail.php'><li class='lidiv'>three</li></a>
<a href='coursedetail.php'><li class='lidiv'>four</li></a>

              </ul>
</li></ul>


<ul id='nav'>
             <li><a href='#' id='s8' >Heading 2</a>
<ul>
<a href='coursedetail.php'><li class='lidiv'>five</li></a>
<a href='coursedetail.php'><li class='lidiv'>six</li></a>
<a href='coursedetail.php'><li class='lidiv'>seven</li></a>
<a href='coursedetail.php'><li class='lidiv'>eight</li></a>


              </ul></li></ul>

我已对这些内容进行了onclick设置，以便close和open点击ul，如下所示

$(document).ready(function(){
  $("#nav > li > a").on("click", function(e){

    if($(this).parent().has("ul")) {
      e.preventDefault();
    }

    if(!$(this).hasClass("open")) {

      // hide any open menus and remove all other classes
      $("#nav li ul").slideUp(350);
      $("#nav li a").removeClass("open");

      // open our new menu and add the open class
      $(this).next("ul").slideDown(350);
      $(this).addClass("open");
    }

    else if($(this).hasClass("open")) {

      $(this).removeClass("open");
      $(this).next("ul").slideUp(350);
    }
  });
});

我需要根据用户给出的值打开不同的标题。如果用户给出s7，我将打开Heading 1下拉，如果用户给出s8，我将放弃Heading 2。

我尝试使用以下代码触发onclick事件

$("#nav > li > a#s7").trigger("click");

如果用户输入是s7，但它没有按照上面的设置触发onclick。

请更新我可以触发onclick的方式，然后向下滑动Heading 1的菜单，并按照值Heading 2向下滑动。感谢。

Answer 1

请尝试使用以下代码段。我无法重现您的代码问题。

<!DOCTYPE html>
<html>
<head> 
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<ul id='nav'>
             <li><a href='#' id='s7' >Heading 1</a>
<ul>
<a href='coursedetail.php'><li class='lidiv'>one</li></a>
<a href='coursedetail.php'><li class='lidiv'>two</li></a>
<a href='coursedetail.php'><li class='lidiv'>three</li></a>
<a href='coursedetail.php'><li class='lidiv'>four</li></a>

              </ul>
</li></ul>


<ul id='nav'>
             <li><a href='#' id='s8' >Heading 2</a>
<ul>
<a href='coursedetail.php'><li class='lidiv'>five</li></a>
<a href='coursedetail.php'><li class='lidiv'>six</li></a>
<a href='coursedetail.php'><li class='lidiv'>seven</li></a>
<a href='coursedetail.php'><li class='lidiv'>eight</li></a>


              </ul></li></ul>

<script>
$(document).ready(function(){
  $("#nav > li > a").on("click", function(e){

    if($(this).parent().has("ul")) {
      e.preventDefault();
    }

    if(!$(this).hasClass("open")) {

      // hide any open menus and remove all other classes
      $("#nav li ul").slideUp(350);
      $("#nav li a").removeClass("open");

      // open our new menu and add the open class
      $(this).next("ul").slideDown(350);
      $(this).addClass("open");
    }

    else if($(this).hasClass("open")) {

      $(this).removeClass("open");
      $(this).next("ul").slideUp(350);
    }
  });
});


</script>
</body>
</html>

注意：现在在浏览器控制台窗口中的代码下面执行并检查它。

$（“＃nav＆gt; li＆gt; a＃s7”）。触发器（“点击”）;

如何使用JQuery手动触发click事件

1 个答案: