jquery怎么實(shí)現(xiàn)簡(jiǎn)單下拉菜單效果

本文小編為大家詳細(xì)介紹“jquery怎么實(shí)現(xiàn)簡(jiǎn)單下拉菜單效果”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“jquery怎么實(shí)現(xiàn)簡(jiǎn)單下拉菜單效果”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

看效果

html

<ul>
    <li>
      主題市場(chǎng)
      <ul>
        <li>
          運(yùn)動(dòng)派
          <ul>
            <li>三級(jí)菜單a</li>
            <li>三級(jí)菜單b</li>
            <li>三級(jí)菜單c</li>
            <li>三級(jí)菜單d</li>
          </ul>
        </li>
        <li>
          有車族
          <ul>
            <li>
              三級(jí)
              <ul>
                <li>四級(jí)</li>
                <li>四級(jí)</li>
                <li>四級(jí)</li>
              </ul>
            </li>
            <li>三級(jí)</li>
            <li>三級(jí)</li>
            <li>三級(jí)</li>
          </ul>
        </li>
        <li>生活家</li>
      </ul>
    </li>
    <li>
      特色購(gòu)物
      <ul>
        <li>淘寶二手</li>
        <li>拍賣會(huì)</li>
        <li>愛逛街</li>
        <li>全球購(gòu)</li>
        <li>淘女郎</li>
      </ul>
    </li>
    <li>
      優(yōu)惠促銷
      <ul>
        <li>天天特價(jià)</li>
        <li>免費(fèi)試用</li>
        <li>清倉(cāng)</li>
        <li>1元起拍</li>
      </ul>
    </li>
    <li>工具</li>
</ul>

簡(jiǎn)單設(shè)置一下css

<style type="text/css">
  ul li {
    list-style: none;
  }

  li ul {
    display: none;
  }

  .plus {
    list-style-image: url(img/plus.gif);
  }

  .minus {
    list-style-image: url(img/minus.gif);
  }
</style>

js代碼

<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(function () {
      //給有ul的li加下圖標(biāo)（添加類名）
      $("li:has(ul)")
        .addClass("plus")
        //添加點(diǎn)擊事件
        .click(function (e) {
          //看看直接點(diǎn)的那個(gè)li（事件源）有沒有子元素
          if ($(e.target).children().length) {
            $(this).children().slideToggle();
            $(this).toggleClass("minus");
          }
          e.stopPropagation(); //阻止事件冒泡，目的只讓當(dāng)前這一層產(chǎn)生動(dòng)畫
        });
    });
</script>

讀到這里，這篇“jquery怎么實(shí)現(xiàn)簡(jiǎn)單下拉菜單效果”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。