jQuery implements drop-down menu navigation-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

jQuery implements drop-down menu navigation

Mar 15, 2018 pm 04:02 PM

jquery Drop-down menu navigation

This time I will bring you jQuery implementation of drop-down menu navigation. What are the precautions for jQuery implementation of drop-down menu navigation? The following is a practical case, let’s take a look.

This article mainly introduces jQuery to implement a simple drop-down menu navigation function, involving jQuery's operation skills related to page element traversal and node modification. Friends in need can refer to the following

Examples of this article Use jQuery to implement simple drop-down menu navigation function. Share it with everyone for your reference, the details are as follows:

The specific code is as follows:

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
    &lt;title&gt;www.jQuery导航&lt;/title&gt;
    &lt;style type=&quot;text/css&quot;&gt;
      #menu{width:300px;margin-left:auto;margin-right:auto;}.has_children{background:#555;color:#fff;cursor:pointer;}.highlight{color:#fff;background:green;}
      p{padding:0;}
      p a{background:#888;display:none;float:left;width:300px;}
    &lt;/style&gt;
    &lt;!-- 引入 jQuery --&gt;
    &lt;script src=&quot;jquery1.3.2.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
      //等待dom元素加载完毕.
    $(document).ready(function(){
        $(".has_children").click(function(){
          $(this).addClass("highlight")      //为当前元素增加highlight类
          .children("a").show().end()      //将子节点的a元素显示出来并重新定位到上次操作的元素
          .siblings().removeClass("highlight")    //获取元素的兄弟元素，并去掉他们的highlight类
          .children("a").hide();        //将兄弟元素下的a元素隐藏
          });
        });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p id=&quot;menu&quot;&gt;
      &lt;p class=&quot;has_children&quot;&gt;
        &lt;span&gt;第1章-认识jQuery&lt;/span&gt;
        &lt;a&gt;1.1-JavaScript和JavaScript库&lt;/a&gt;
        &lt;a&gt;1.2-加入jQuery&lt;/a&gt;
        &lt;a&gt;1.3-编写简单jQuery代码&lt;/a&gt;
        &lt;a&gt;1.4-jQuery对象和DOM对象&lt;/a&gt;
        &lt;a&gt;1.5-解决jQuery和其它库的冲突&lt;/a&gt;
        &lt;a&gt;1.6-jQuery开发工具和插件&lt;/a&gt;
        &lt;a&gt;1.7-小结&lt;/a&gt;
      &lt;/p&gt;
      &lt;p class=&quot;has_children&quot;&gt;
        &lt;span&gt;第2章-jQuery选择器&lt;/span&gt;
        &lt;a&gt;2.1-jQuery选择器是什么&lt;/a&gt;
        &lt;a&gt;2.2-jQuery选择器的优势&lt;/a&gt;
        &lt;a&gt;2.3-jQuery选择器&lt;/a&gt;
        &lt;a&gt;2.4-应用jQuery改写示例&lt;/a&gt;
        &lt;a&gt;2.5-选择器中的一些注意事项&lt;/a&gt;
        &lt;a&gt;2.6-案例研究——类似淘宝网品牌列表的效果&lt;/a&gt;
        &lt;a&gt;2.7-还有其它选择器么？&lt;/a&gt;
        &lt;a&gt;2.8-小结&lt;/a&gt;
      &lt;/p&gt;
      &lt;p class=&quot;has_children&quot;&gt;
        &lt;span&gt;第3章-jQuery中的DOM操作&lt;/span&gt;
        &lt;a&gt;3.1-DOM操作的分类&lt;/a&gt;
        &lt;a&gt;3.2-jQuery中的DOM操作&lt;/a&gt;
        &lt;a&gt;3.3-案例研究——某网站超链接和图片提示效果&lt;/a&gt;
        &lt;a&gt;3.4-小结&lt;/a&gt;
      &lt;/p&gt;
    &lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!