cari

Rumah >hujung hadapan web >tutorial js >jQuery mencipta menu_jquery lipat akordion yang hebat

jQuery mencipta menu_jquery lipat akordion yang hebat

WBOY
WBOYasal
2016-05-16 16:05:461254semak imbas

Menu lipat akordion yang dibuat oleh jQuery yang hebat mempunyai kesan yang sangat baik. Berikut ialah versi yang lebih baik daripada versi sebelumnya, terutamanya peningkatan kod jquery

Gambar demo:

utama.js

$(function(){
  var tmp = null,
    $title = $('.title'),
    $con = $('.title > ul');
 
  $title.click(function(){
    $(tmp).children('ul').slideUp().end().children('.arrow').removeClass('arrow-up');
    $(this).children('ul').slideToggle().end().children('.arrow').addClass('arrow-up');
    tmp = this;
  });
  $con.click(function(){
    return false;  // 阻止事件冒泡
  });
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>jquery js css html</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>
  <!--sidebar-->
  <div class="sidebar">
    <ul>
      <li class="title"><span>一、HTML5基础教程</span><span class="arrow"></span>
        <ul class="in-sidebar">
          <li><a target="_blank" href="http://www.jiuni.com.cn">HTML5基础教程1</a></li>
          <li><a href="#">HTML5基础教程2</a></li>
          <li><a href="#">HTML5基础教程3</a></li>
          <li><a href="#">HTML5基础教程4</a></li>
          <li><a href="#">HTML5基础教程5</a></li>
        </ul>
      </li>
      <li class="title"><span>二、CSS3基础教程</span><span class="arrow"></span>
        <ul class="in-sidebar">
          <li><a href="#">CSS3基础教程1</a></li>
          <li><a href="#">CSS3基础教程2</a></li>
          <li><a href="#">CSS3基础教程3</a></li>
          <li><a href="#">CSS3基础教程4</a></li>
          <li><a href="#">CSS3基础教程5</a></li>
        </ul>
      </li>
      <li class="title"><span>三、Javascript基础教程</span><span class="arrow"></span>
        <ul class="in-sidebar">
          <li><a href="#">Javascript基础教程1</a></li>
          <li><a href="#">Javascript基础教程2</a></li>
          <li><a href="#">Javascript基础教程3</a></li>
          <li><a href="#">Javascript基础教程4</a></li>
          <li><a href="#">Javascript基础教程5</a></li>
        </ul>
      </li>
      <li class="title"><span>四、NodeJs基础教程</span><span class="arrow"></span>
        <ul class="in-sidebar">
          <li><a href="#">NodeJs基础教程1</a></li>
          <li><a href="#">NodeJs基础教程2</a></li>
          <li><a href="#">NodeJs基础教程3</a></li>
          <li><a href="#">NodeJs基础教程4</a></li>
          <li><a href="#">NodeJs基础教程5</a></li>
        </ul>
      </li>
      <li class="title"><span>五、IOS基础教程</span><span class="arrow"></span>
        <ul class="in-sidebar">
          <li><a href="#">IOS基础教程1</a></li>
          <li><a href="#">IOS基础教程2</a></li>
          <li><a href="#">IOS基础教程3</a></li>
          <li><a href="#">IOS基础教程4</a></li>
          <li><a href="#">IOS基础教程5</a></li>
        </ul>
      </li>
    </ul>
 
  </div>
 
  <script src="js/jquery-1.8.3.min.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

style.css

/*globle*/
ul, li{
  margin: 0;
  padding: 0;
  list-style-type: none;
}
a{
  display: inline-block;
  width: 100%;
  height: 31px;
  text-decoration: none;
  color: #fff;
  font-size: 13px;
}
a:hover{
  background: #52718A;
}
/*sidebar*/
.sidebar{
  width: 210px;
  height: 335px;
  margin: 50px auto;
  border-radius: 5px;
  font: 14px '新宋体';
  color: #f4f4f4;
}
.title{
  width: 95%;
  line-height: 32px;
  border-bottom: 1px solid #ccc;
  background: #1ABC9C;
  cursor: pointer;
}
.title > span{
  margin-left: 10px;
}
/*in-sidebar*/
.in-sidebar{
  width: 100%;
  display: none;
}
.in-sidebar > li{
  width: 100%;
  height: 32px;
  background: #34495E;
  line-height: 32px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}
/*arrow*/
.arrow{
  float: right;
  display: inline-block;
  margin-right: 5px;
  width: 20px;
  height: 32px;
  background: url(../img/down.png) no-repeat center;
}
.arrow-up{
  background: url(../img/up.png) no-repeat center;
}

Di atas adalah semua kandungan yang dikongsi dengan anda dalam artikel ini, saya harap ia akan membantu semua orang yang mempelajari jQuery.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Kaedah JavaScript untuk mendapatkan id imej pertama dalam kemahiran javascript_halaman webArtikel seterusnya：Kaedah JavaScript untuk mendapatkan id imej pertama dalam kemahiran javascript_halaman web

Artikel berkaitan

Lihat lagi